0

ページがロードされたときに存在しない Div でjQuery が動作するようにしたい。div は、クライアントのアクションに続いてオンザフライで作成されます (つまり、ページがロードされた後)。

以下は、ポイントを説明するための非常に単純なコードです。

HTML コード

<div id="test">
    <div id="ExistsWhenDocIsLoaded"> Click here </div>
</div>

jQuery コード

<script>
    $("#ExistsWhenDocIsLoaded").on('click',function(){
        var s = '<div id="DivCreatedOnTheFly">New Stuff</div>'  ;
        $("#ExistsWhenDocIsLoaded").append(s);
        // Code below works fine as expected, 
        // but is nested and is hard to read / debug
        // $("#DivCreatedOnTheFly").on('click', 
        //   function(){alert("Click On New Stuff");});
    });

    // The code below fails, 
    // it operate on $("#DivCreatedOnTheFly"), 
    // that doesn't exist when the page is loaded

    $("#DivCreatedOnTheFly").on('click',function(event){alert("Click On New Stuff");}); 
</script>

ユーザーが「ここをクリック」をクリックすると、新しい Div が追加されます。ユーザーが新しい Div をクリックすると、アラート メッセージが表示されます。

警告メッセージがコード内にネストされている$("#ExistsWhenDocIsLoaded")場合、期待どおりに機能しますが、読み取りとデバッグが難しくなります。

アラート メッセージが に関連するコードで記述されている場合、コードは最初に解釈されたときに返さ$("#DivCreatedOnTheFly")れるため、トリガーされることはありません。$("#DivCreatedOnTheFly")NULL

4

4 に答える 4

2

このように使用する必要があります.on()-

$("#ExistsWhenDocIsLoaded").on('click',"#DivCreatedOnTheFly",function(event){
    alert("Click On New Stuff");
});
于 2013-04-22T10:17:57.537 に答える
0

貢献してくれた皆さんに感謝します。ここまでの結果です。私が望んでいたほどエレガントではありませんが、それが役立つことを願っています.

http://jsfiddle.net/siba/z7Xcx/2/

$("#ExistsWhenDocIsLoaded").on('click', function () {
    var s = '<div id="DivCreatedOnTheFly" class="Reload">New Stuff</div>';

    // the 'if' test prevents the div to appear twice

    if ($("#DivCreatedOnTheFly").length == 0) {
        $("#ExistsWhenDocIsLoaded").append(s);
    }

});


$("#ExistsWhenDocIsLoaded").on('click', "#DivCreatedOnTheFly", function (event) {
    alert("Click On New Stuff");
});
于 2013-04-22T18:23:03.383 に答える
0

イベントを$(document).load(function(){ });

または要素を動的にロードした後（コールバックを使用して...）

コードは次のようになります。

<script>

$(document).load(function(){
    $("#ExistsWhenDocIsLoaded").on('click',function(){
        var s = '<div id="DivCreatedOnTheFly">New Stuff</div>'  ;
        $("#ExistsWhenDocIsLoaded").append(s);
        // Code below works fine as expected, 
        // but is nested and is hard to read / debug
        // $("#DivCreatedOnTheFly").on('click', 
        //   function(){alert("Click On New Stuff");});
    });

    // The code below fails, 
    // it operate on $("#DivCreatedOnTheFly"), 
    // that doesn't exist when the page is loaded

    $("#DivCreatedOnTheFly").on('click',function(event){alert("Click On New Stuff");}); 
 });
</script>
于 2013-04-22T10:21:22.750 に答える