jquery - 如何在新创建的元素上使用 Jquery 效果（爆炸）

Question

我试图让一个 div 元素爆炸然后重新出现。这部分工作正常，但是当创建新的 div 时，爆炸效果在副本上不起作用。

这是我的jQuery：

   $(document).ready(function(){
        $("#thediv").click(function(){
            $("#thediv").effect('explode');
            $(".mainBody").append("<div id='thediv'> </div>");
        });
    });

这是我的HTML：

    <div class="mainBody" align = "center">
        <div id="thediv" style=" width: 100px; height: 100px; background-image: url('http://smartisan.net/stripes.png')"></div>
    </div>

如果你想看的话，这里是页面：就在这里

谢谢

Answer 1

使用 jQuery 效果/动画不会从 DOM 中删除元素，它只是隐藏它。因此，您只需要使用完整的回调将其再次设置为可见。

$("#thediv").click(function(){
     $("#thediv").effect('explode', function() {
         $(this).show()
     });

在这里小提琴：http: //jsfiddle.net/HBepC/1/

Answer 2

$(document).ready(function(){
    $("body").on("click","#thediv",function(){
        $("#thediv").effect('explode');
        $(".mainBody").append("<div id='thediv'> </div>");
    });
});

使用带有事件名称的“on”来绑定动态加载的元素