Question

我的页面上有很多div prodct-item-info。我在jQuery中有一些代码，只要用户点击具有此类的元素，就会触发一些代码。

问题是，页面动态地加载了这个类的更多元素。当发生这种情况时，当我按下新加载的元素的这一类时，没有任何反应。但是，如果我点击动态加载之前创建的元素，它仍然有效。

例如， x 是我第一次加载页面时加载的内容， y 是我动态添加的内容：

页面上有这个：

x x x x x x x x x x x x x x x x x x

当我点击这些时，它可以正常工作。

现在我加载：

y y y y y y y y

当我点击这些时，它什么也没做。

知道怎么解决吗？

提前致谢！

修改

这是我的代码：

$('.product-item-info').on("click",function() {
        var pid = $(this).find('input').val();
        $.get('product_info.php',{pid:pid},function(data){
            $('#product-lb').html(data).append('<span class="x"><span>X</span></span>');
            $('.x').click(function() {
                $('#dimmer').click();
            });
            $('#dimmer').css({width:$('html').width(),height:$('html').height()});
            $('#dimmer').show();
             center_div($('#product-lb'));
        });
    });

Answer 1

您如何定位元素？类似的东西：

$('.someClass').click(function(){
    alert('hi');
});

如果是这样，那么只有当前渲染的元素才会拥有该事件。几个选项。

一，尝试使用jQuery on()定位您的元素。

$("#someID").on("click", "a.someClass", function() {
    alert('Do Something);
});

或者，在添加元素后，直接将事件应用于它。

Answer 2

您需要使用on将事件附加/委托给动态添加的内容。我在下面的示例中使用了body。您也可以将其替换为$(document)。

$('body').on('click', '.prodct-item-info', function(){
    //put your code here
});

如果prodct-item-info有父级，则应将body替换为#parentID或.parentClass，以便只要点击父级，就会找到其中的所有子级使用类prodct-item-info并运行代码。

将事件绑定到页面上的动态加载元素

修改

2 个答案: