Question

我使用jQuery <div>方法动态生成了id="modal" load()：

$(".show-product").click(function(){

    $("#modal").load($(this).attr("href"), function(e){

        $(".details").click(function(){

我必须将代码放在类的click事件中。详细信息在此代码中，因为如果我没有运行。我在这两个地方都有代码，因为我也在模态之外使用它，加倍。

我用动态构建的表发生了类似的事情，这要归功于我在这里看到的一个例子，stackoverflow。它不会捕获click事件，窗口会在打开模态时变暗，但它不会调用url或load。这段代码：

$.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()

我认为在这两种情况下事件都不起作用，因为它们是动态加载的。我一直在寻找这个和谷歌并尝试进行更改，但它不工作而不必重复代码（在事件$（文件）.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){
        ..........
        ..........
    });
});

由于这些更改仍然无法正常工作，因此只能在包含静态内容的页面中工作，当我获得动态内容（模态，表格动态等）不起作用时。

我做错了什么？

由于

Answer 1

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

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

Answer 2

您应该将jquery on()用于动态创建元素的事件。

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

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

2 个答案: