Question

我正在尝试向动态创建的元素添加.on事件，但它似乎不起作用。

我的表格呈现正确，但是当我点击exp_col div时没有任何反应，甚至没有错误消息。

我在这里做错了吗？

    jQuery.each(items, function(index, item) {
        jQuery('<tr>')
            .addClass('item_class')
            .append(
                jQuery('<td/>')
                    .addClass('text')
                    .text('XXX')
                    .append(
                        jQuery('<div />')
                            .addClass('exp_col')
                            .text('More...')
                    )
                )

            .append(jQuery('<td/>').addClass('info').text('yyy'))
        .appendTo(table);

    });

    table.on("click", ".exp_col", function(e) { 
        myFunc( this );
    });
    table.appendTo(div);

Satpai的回答是完美的，但是如果我要调用一个做了一些CSS修补的函数，而不是console.log，那么就删除它自己并添加一个新函数。我怎么能做到这一点？

function myFunc(ele){
    //does some css stuff       
    jQuery(ele).off();
}

function myOtherFunc(ele){
    //removes the css stuff
    jQuery(ele).off();
}

我的总体目标是打开和关闭两个功能。

Answer 1

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

正在动态创建元素。

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

一般语法

$(document).on(event, selector, eventHandler);

根据你的代码使用：

//Move the event handler outside each block
table.on("click", ".exp_col", function() { 
    console.log('test');
});
table.appendTo(div);

我是否错误地添加了.on事件监听器？

1 个答案: