dynamic - jQueryの動的に生成されたコンテンツ-クリックが機能しない

Question

次のように、divを動的に追加するページがあります。

$(divCol).insertAfter(parentNewRow.children('.edCol:last'));

これにより、最後のdivの後に別の重複divが挿入され.edColます。.edCol新しいdivでは、どのボタンも機能しなくなったという事実を除いて、すべてがうまく機能します。元のdivで完全に機能するすべてのjQuery関数は、何も実行しなくなりました。新しいdivのコードは同じで、すべてのクラスは同じなどですが、何も機能しません。

明らかに私は何かが欠けています。誰かがこれに光を当てることができますか？どんな助けでも大歓迎です。

Answer 1

jQueryのドキュメントには、この関数live()を使用する必要があることが非推奨であることが示されていon()ます。

jQuery 1.7以降、.live（）メソッドは非推奨になりました。.on（）を使用して、イベントハンドラーをアタッチします。古いバージョンのjQueryのユーザーは、.live（）ではなく.delegate（）を使用する必要があります。

これは、このフィドルでの作業を見ることができる例です。

$(function() {
    $('#container').on('click', 'div', function() {
        console.log('clicked');
    });

    $('#container').append($('<div>BLE</div>'));
});​

そしてそれに付随するHTML：

<div id="container">
    <div>BLA</div>
</div>​

---

編集

より完全な例であり、メソッドがどのように使用されるかについての疑問を明らかにする次のフィドルをチェックしてくださいon()：DEMO。

HTML

<div id="container">
    <div>
        First you have these buttons with the bound click handler<br/>
        <button>One</button><br/>
        <button>Two</button><br/>
        <button>Three</button><br/>
    </div>
</div>
<hr/>
<button id="load-btn">Click this button to load the buttons below in the &lt;div&gt; above</button>
<hr/>
<div id="content">
    <div>
        These buttons are going to be loaded above.<br/>
        <button>Four</button><br/>
        <button>Five</button><br/>
        <button>Six</button><br/>
    </div>    
</div>

JS

$(function() {
    // Bind click handler to the #load-btn which will
    // dynamically load the lower div content inside the upper div.
    $('#load-btn').on('click', function() {
        $('#container').append($('#content').html());
    });

    // Bind another click handler to all <button>s that exist at the moment
    // and that could be added dynamically inside the #container element.
    $('#container').on('click', 'button', function() {
        console.log('button ' + $(this).html() + ' clicked.');
    });
});​

Answer 2

jQueryのlive（）メソッドを使用します。説明：現在および将来、現在のセレクターに一致するすべての要素にイベントハンドラーをアタッチします。

REF：http ://api.jquery.com/live/

$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});

Answer 3

'live'バインディングを使用すると、将来的に要素にイベントをアタッチすることもできます。

$('a').live('click' , function() {
    alert('clicked');
});

Answer 4

$(document).on("click", ".my_Class", function (e) {
        alert("Works Fine");
    });