动态版本中的类不起作用

Class in dynamic version doesn't work

本文关键字：不起作用 版本 动态      更新时间：2023-09-26

我有问题。

当我在静态版本中单击我的链接时：

<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>

效果无法正常工作。

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

问题一定是，该类在动态版本中不起作用。有人有解决方案吗？请。提前感谢！！

假设你正在使用这个：

$('.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 作为回退。

您很可能还有其他一些代码可以

$('.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 元素的预先存在的祖先（因为它们位于其中）。

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

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

就像我创建了这个 css 和链接工作正常。您在动态创建 html 代码时遇到问题吗？请给我 html 代码快照。

相关文章：