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

你实际上需要这样的委托事件处理程序：

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

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

在你的情况下，你似乎有一个带有id="betriebe"的祖先，因此使用该代码作为委托元素的代码会非常简单：

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

注意：不要将body用于委派事件，因为样式可以阻止它接收冒泡的鼠标事件！始终使用document作为后备。

Answer 2

你很可能有其他一些代码

$('.ajax-portfolio').click(function(){...});

或

$('.ajax-portfolio').on('click', function(){...});

您需要将其更改为

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

问题在于，使用$('.ajax-portfolio').click将处理程序绑定到DOM中的现有元素（脚本运行时的）。当您稍后添加具有相同类的新元素时，您的代码尚未附加到该元素。

使用$('#betriebe').on('click', '.ajax-portfolio'，您可以将事件处理委派给所有.ajax-portfolio元素的预先存在的祖先（，因为它们位于其中）。

Answer 3

您可以通过inspect元素运行代码并检查源代码。您可以看到html代码已经正确创建了ant，然后您可以通过静态比较它。

for(var i=0;i<12;i++)
        $('<a class="ajax-portfolio" href="' + i+ '"><span class="moreText">shahin</span>  </a>').appendTo('#betriebe');

就像我创建了这个，css和link工作得很好。你有动态创建HTML代码的问题吗？请给我html代码快照。

动态版中的类不起作用

3 个答案: