jQuery函数: prepend that calls another JQuery function

Question

长期读者 - 第一次海报。

我得到了这个 JQuery 函数，并且我正在尝试从另一个 JQuery 函数执行它:

$(".delete_item").click(function() {
    var element = $(this);
    var Id = element.attr("id");
    var split = Id.split('_');
    var row = 'row_' + split[1];

    var dataString = 'item=' + split[1];

    $.ajax({
        type: "POST",
        url: "_remove.jsp",
        data: dataString,
        success: function() {

           removeRow(row);

        }

    });

我遇到的问题是当我在另一个函数的 success: function() 中使用 prepend 时，尝试调用此函数。它不起作用:

$("#table")
    .prepend($('<tr>')
        .prepend($('<td>')
            .prepend($('<form>')
                .attr('method','post')
                .attr('id','delete_1234')
                .attr('name','delete_1234')
                .prepend($('<input>')
                    .attr('type', 'image')
                    .attr('name','Delete')
                    .attr('src', 'images/button_delete.gif')
                    .attr('class','delete_item')
                    .attr('id','delete_1234')
                )
            )
        )

我尝试从 success 函数中调用的函数(第一个)在从 html 页面使用时工作正常，但在从 prepend 调用它时则不然。它不调用“delete_item”类函数，而是重新加载页面。希望我能让自己易于理解，并且有人知道如何解决这个问题。

谢谢

Answer 1

所以您的意思是，当您以编程方式创建 input[type="image"] 时，单击它时不会执行“click”事件处理程序？

这是因为你绑定(bind)了点击事件

$(".delete_item").click(function() {...}`

该元素可能还不存在，因此没有绑定(bind)任何事件。

您应该将事件委托(delegate)与.on()一起使用(或.delegate()):

$('#table').on('click', '.delete_item', function(e) {
    ...
});

上面的代码做了什么？

• 将事件处理委托(delegate)给 ID 为 #table 的元素(基本上是现有的父元素)。
• 当捕获点击事件时，如果目标是类 .delete_item 的元素，则执行处理程序。

我邀请您阅读 .on()获取有关什么是事件委托(delegate)及其工作原理的更多信息和示例