javascript - 单击 标签运行 JQuery javascript 函数

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我像这样使用 PHP 创建一个跨度。

if ($subnetkey  == 1 ) { echo ("<span class='subnetkey'>S/N of: $subnetnum</span>&nbsp;&nbsp;");}

它可以工作，并在屏幕上显示正确的数据。另外，如果我使用“检查元素”查看它，它的格式正确。

<span class="subnetkey">S/N of: 780</span>

我在页面顶部有这个脚本。我也在底部尝试过。

<script>    
$(document).ready(function(){
    $(".subnetkey").click(function() {
        alert("subnet click mode");
    });
});
</script>

当我单击跨度时，没有任何反应。我没有收到任何错误，当然我也没有看到警报。

这似乎是动态构建页面和使用页面之间的时间问题。但如果不是这样，我该怎么做才能让这个函数触发呢？

Answer 1

像 click()、dblclick()、mouseenter() 等 JQuery 事件方法仅适用于渲染 DOM 时已创建的元素。对于动态创建的元素，您可以使用 on() 方法和以下语法(请参阅 previous post ):

$(staticAncestors).on(eventName, dynamicChild, function() {});

由于它是动态创建的元素，因此您的代码将无法工作。尝试:

$(document).on('click', '.subnetkey', function() {
    alert("subnet click mode");
});

jQuery 仅在运行时识别页面中的元素，因此 jQuery 无法识别添加到 DOM 的新元素。要解决这个问题，请使用 event delegation ，从新添加的项目到 DOM 中某个点的冒泡事件，该点在 jQuery 在页面加载时运行时就在那里。许多人使用 document 作为捕获冒泡事件的地方，但没有必要一直沿着 DOM 树向上走。理想情况下you should delegate to the nearest parent existing at the time of page load.