jQuery - 関数をトリガーする

Question

jsファイルの別の関数にあるhtmlファイルから関数をトリガーしようとしています。 triggerメソッドを使用しようとしていますが、動作させることができません。 これを行う方法は何ですか？ FIDDLE

<div id="result4" style="color:white; background:black"> 
    from function 
</div> 


<script> 
    var TEST = new test({ 
    type: "image", 
    file: "test.jpg", 
    breakingPoint: 100 
    }); 

    TEST.trigger('reset'); 

</script> 

JS

function test(args) { 

    $this.on('reset', function() { 
    $("#result4").html("new text"); 
    console.log("OK"); 
    }); 

} 

Answer 1

あなたはjquerys readyイベント内のコードにタグを付け包みます。これは、DOMが読み込まれた後ではなく、解析されたときに実行されます。

はたぶん、これはあなたが探しているものです：

$this.on('reset', function() { 
    $("#result4").html("new text"); 
    console.log("OK"); 
}); 

：

<script> 
$(document).ready(function(){ 
    var TEST = test({ 
     type: "image", 
     file: "test.jpg", 
     breakingPoint: 100 
    }); 

    TEST.reset(); 
}); 
</script> 

JSファイル

var test = function(options){ 
    var that = {}; 
    // you can use type, file & breaking point with option.type options.file etc.. 
    that.reset = function() { 
     $("#result4").html("new text"); 
     console.log("OK"); 
    }; 

    return that; 
}; 

Answer 2

でコンソールログを見ると、あなたのフィドルは、エラーが発生しました$thisは定義されていません。

とトリガーのドキュメントを見て：あなたは間違ってそれを呼び出している

​​

。 triggerメソッドを持たない独自のオブジェクトを作成しています。

Answer 3

トリガーはjquery関数でありネイティブJavaScript Object関数ではないため、$ thisを定義してテスト用オブジェクトとして返す必要があります。

function test(args) { 
     var $this = $(this); // declare $this 
    var default_options = { 
    breakingPoint: 2000 
    }; 

    var options = $.extend({}, default_options, args); 

    $("#result1").html(options.type); 
    $("#result2").html(options.file); 
    $("#result3").html(options.breakingPoint); 

    $this.on('reset', function() { 
    $("#result4").html("new text"); 
    console.log("OK"); 
    }); 
    return $this; 

} 

var TEST = new test({ 
    type: "image", 
    file: "test.jpg", 
    breakingPoint: 100 
}); 

TEST.trigger('reset');