由动态生成的元素触发的事件不起作用

Events triggered by dynamically generated element are not working

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

我有一个<div>，其中包含使用jQuery load()方法动态生成的id="modal"：

$(".show-product").click(function(){
    $("#modal").load($(this).attr("href"), function(e){
        $(".details").click(function(){

我不得不将代码放在此代码中类". detail"的单击事件中，因为如果我拥有的内容没有运行。我在两个地方都有代码，因为我也在模态之外使用它，被加倍。

类似的事情发生在我动态构建的表上，这要归功于我在这里看到的一个例子，堆栈溢出。它不会捕获单击事件，窗口在打开模态时变暗，但它不会调用 url 或加载。此代码：

$.ajax({
    url : form,
    type: "POST",
    data : postData,
    success:function(data, textStatus, jqXHR){
        $("#dynamicTable>tbody>tr").remove();
        var x = [];
        $.each(dataSet, function(i, item) {
            x.push('<tr><td><a href="/product/' + item.product.id + '" class="details" data-toggle="modal" data-target="#modal">' + item.product.name + '</a></td>');
            x.push('<td>' + item.product.name + '</td></tr>');
        });
        $("#dynamicTable>tbody").html(x.join(""));
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('Not product found!');
    }
});
event.preventDefault()

我认为在这两种情况下，事件都不起作用，因为它们是动态加载的。我一直在这里和 Google 上寻找并尝试进行更改，但如果不复制代码(在事件$(document).ready和加载数据动态的每个事件、模态窗口和加载表，它就不起作用(。

变化：

$(document).ready(function() {
    //$(".show-product").click(function(){
    $(".show-product").on("click", function(e){
        $("#modal").load($(this).attr("href"), function(e){
            //$('.details').click(function(e){
            // ........
        });
    });
    // Added
    $(".details").on("click", function(e){
        ..........
        ..........
    });
});

有了这些更改仍然不起作用，仅适用于具有静态内容的页面，当我获得内容动态(模态、表格动态等(

时，事件不起作用。

我做错了什么？

将

事件委托给body可以解决此问题，因为它避免将处理程序直接附加到动态生成的元素：

$(document.body).on("click", ".details", function(e){
  ...
});

你应该对动态创建的元素上的事件使用 jquery on()。

文档： http://api.jquery.com/on/

相关文章：