0

我希望 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

4

4 回答 4

2

你需要用.on()这种方式——

$("#ExistsWhenDocIsLoaded").on('click',"#DivCreatedOnTheFly",function(event){
    alert("Click On New Stuff");
});
于 2013-04-22T10:17:57.537 回答
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 回答
0

您可以为此使用该.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 示例。

于 2013-04-22T10:24:08.073 回答
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 回答