jsonで追加された動的コンテンツでJavaScriptイベントが動作しない

Question

DOMエレメントが$.getJSONに基づいて動的に生成され、このエレメントのJavascript関数が機能しない状況があります。この状況で私は何をすべきかの方向性を見ているので、私はコードにいくつかの一般的なアイデアを投稿します。

site.jsはその後

$(document).ready(function() { 
    $('.element').on('click', function() { 
     $(this).toggleClass('active'); 
    }); 

    $(".slider").slider({ 
     // some slider UI code... 
    }); 
}); 

のような一般的な機能が含まれています

$.getJSON('json/questions.json', function (data) { 
    // generating some DOM elements... 
}); 

私はまた、機能refresh_scripts()にすべてのsite.jsコンテンツをラップし、$.getJSON()後、それを呼び出そうとしていますが、何もであるように思いませんワーキング。

Answer 1

まず、委任されたイベントハンドラを使用して、動的に追加された要素のイベントを捕捉する必要があります。その後、成功ハンドラ関数内で.slider()メソッドを再度呼び出すと、新しく追加されたコンテンツのプラグインをインスタンス化できます。このお試しください：代わりの要素に直接onを呼び出すので

$(document).ready(function(){ 
    $('#parentElement').on('click', '.element', function() { 
     $(this).toggleClass('active'); 
    }); 

    var sliderOptions = { /* slider options here */ }; 
    $(".slider").slider(sliderOptions); 

    $.getJSON('json/questions.json', function(data) { 
     // generating some DOM elements... 
     $('#parentElement .slider').slider(sliderOptions); 
    }); 
});  

Answer 2

を、動的に追加し、その要素にそれを狭くするオプションselectorパラメータを使用していない親にそれを呼び出します。

$('.parent').on('click', '.element',() => { 
    // do something 
}); 

本との違い：

$('.element').on('click',() => {}); 

が$('.element').on()である、あなただけの、そのセットに現在ある要素にリスナーを適用しています。それが後に追加された場合、そこには存在しません。

$(.parent)に適用すると、その親は常に存在し、追加されたときに関係なく、すべての子にフィルタリングされます。

Answer 3

最も簡単な方法は、あなたが追加した後にこれを追加することです/あなたのDOMのコースの

$('script[src="site.js"]').remove(); 
$('head').append('<script src="site.js"></script>'); 

DOMは別のファイルにする必要があります生成し、あなたのjs関数は、あなたのsite.jsより生成