Question

我希望jQuery能够在加载页面时不存在的Div上运行;在客户端的操作之后（即加载页面之后）动态创建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。

Answer 1

您需要以这种方式使用.on() -

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

Answer 2

您可以将事件放在$(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>

Answer 3

您可以使用.on()方法，但您也可以在创建元素时添加功能。只需将元素的创建包装在jQuery函数中，即可创建一个jQuery对象。

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

    $s.on('click', function() {
        alert('clicked');
    });

    $("#ExistsWhenDocIsLoaded").append($s);
});

JSFiddle example

Answer 4

感谢大家的贡献。这是迄今为止的结果。我希望它会有所帮助，尽管它并不像我希望的那样优雅。

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");
});

让jquery对不存在的div进行操作

HTML代码

jQuery代码

4 个答案: