javascript - 动态版本中的类不起作用

Question

我有一个问题。

当我点击静态版本中的链接时:

<a class="ajax-portfolio" href="page.html"><span class="moreText">+</span></a>

页面和 JavaScript 函数运行良好。

但是，当我制作动态内容时:

<script>
    $(function() {
        var url = "json1.json";
        $.getJSON(url, function(json) {
            $.each(json.sommer, function(i, item) {

                $('<a class="ajax-portfolio" href="' + item.name + '"><span class="moreText">+</span></a>').appendTo('#betriebe');
            });
        });
    });
</script> 

效果无法正常工作。

无法正常工作，因为我有一个新窗口。在静态版本中，链接页面在我的页面的一部分中打开。

问题一定是该类在动态版本中不起作用。有人有解决办法吗？请。提前致谢!!

Answer 1

假设您使用的是这个:

$('.ajax-portfolio').click(function(e){
    // Do stuff
});

您实际上需要一个像这样的委托(delegate)事件处理程序:

$(document).on('click', '.ajax-portfolio', function(e){
    // Do stuff
});

它的工作原理是监听向上冒泡到不变祖先的事件，然后应用 jQuery 选择器。这意味着元素只需要在事件发生时存在即可匹配。如果没有更方便的元素，则 document 是默认值。

在您的情况下，您似乎有一个带有 id="betriebe" 的祖先，因此使用它作为委托(delegate)元素，代码会稍微快一点:

$('#betriebe').on('click', '.ajax-portfolio', function(e){
    // Do stuff
});

注意:不要将 body 用于委托(delegate)事件，因为样式可以阻止它接收冒泡鼠标事件!始终使用 document 作为后备。