Question

这是我的AJAX电话：

    $.ajax({
        type: 'POST',
        url: '<?php echo site_url('channel_partners/cms/get_news'); ?>',
        data: data,
        dataType: 'json',
        success: function(data, status, xhr) {
            var json = JSON.parse(data);
            for (var i=0; i<json.length; i++) {
                $('ul#news').append(
                '<li id="' + json[i].article_id + '"><a class="deleteItem" title="Delete Item" href="#">Delete</a> 
<a id="editItem" title="Edit Item" href="#" target="_blank">Edit</a>
 <a href="#" target="_blank">' + json[i].title + '</a></li>'
               );               
                 }
         },
        error: function(xhr, status, error) {
            //alert('Error: ' + status + ' ' + error);
            console.log(xhr)
        }
    });

我的问题是：当我只有一个“deleteItem”类的常规链接时，它会触发一个deleteItem单击事件。活动正常。但是当通过jQuery以编程方式添加HTML时，该链接不再可用。为什么它不可点击。这就像jQuery没有认识到它。我需要做些什么来使事件发生火灾？我尝试以编程方式添加类，但这不起作用。

Answer 1

动态添加到dom的元素应该对jQuery v1.7使用.on，对旧版本使用.live/.delegate。

请注意，对于旧版本，使用.delegate比使用.live

更受青睐

在你的情况下应该是，

使用.on（jQuery v1.7）

$('#news').on ('click', '.deleteItem', function () {
 //delete code
});

对于使用.delegate的旧版本，[首选方法]

$('#news').delegate('.deleteItem', 'click', function () {
 //delete code
});

或使用.live，

$('.deleteItem').live ('click', function () {
 //delete code
});

Answer 2

不使用click()，而是使用on()附加事件处理程序。

Answer 3

嗯，这就是正在发生的事情

页面DOM加载
添加.deleteItem点击处理程序
你动态添加html

当然，您在（3）中添加的项目没有任何点击处理程序。你需要做什么是在append html代码之后添加点击处理程序（或查看$.live）

Answer 4

您没有显示链接的工作方式，但我假设您使用.click()或.on()的非委托形式将处理程序附加到原始“.deleteItem”链接 - 其中任何一个仅适用于当时存在的元素。如果动态添加新元素（例如，在Ajax调用之后），则需要在添加单击处理程序后绑定它（例如，在Ajax成功处理程序中）。或者，您可以使用委派事件：

$("#news").on("click", ".deleteItem", function() {
    // your delete handling code here
});

// OR for jQuery versions older than 1.7
$("#news").delegate(".deleteItem", "click", function() {
    // your delete handling code here
});

// OR for really old jQuery versions
$(".deleteItem").live("click", function() { ... });

使用.on()或.delegate()处理程序绑定到容器对象，并自动应用于与第二个选择器匹配的任何子对象，无论它们是在页面加载时存在还是稍后添加。不推荐使用.live()函数，但它是1.4.2之前的唯一选择 - 它以类似的方式工作，但将处理程序绑定到文档，因此它的效率低得多。

jQuery：链接在附加时失去了它的类的可点击性

4 个答案: