javascript - 在事件本身的新元素上分配点击事件

Question

我想创建一个新元素并为它创建它的 onclick 分配相同的事件。

演示

$(function(){
    var counter = 0;
    $('.sub').click(function(event){
        event.stopPropagation();
        counter++;
        $div = $(this); // makes more sense in the original code
        $div.append('<div class="sub" title="subsub">subsub' + counter + '</div>');
        //$div.find('.sub').click // <-- ?????
    });
});

在我的演示中，我想为每个被点击的子创建一个新的子子。比我想将相同的点击事件添加到新的子子元素。

谁能帮我解决这个问题？我没有发现这个问题。也许我没有正确的 google 或 SO 关键字：/

Answer 1

只需使用事件委托

 $(document).on('click', '.sub', function(event){

此时您的点击事件似乎工作正常，因为您正在使用append它实际上嵌套了new div被点击的 div 内部。尝试使用after，功能中断。

$(function(){
    var counter = 0;
    $(document).on('click', '.sub', function(event){
        event.stopPropagation();
        counter++;
        $div = $(this); // makes more sense in the original code
        $div.after('<div class="sub" title="subsub">subsub' + counter + '</div>');
    });
}); 

检查小提琴

Answer 2

为什么不创建适当的元素：

$(function(){
    var counter = 0;
    $('.sub').on('click', doStuff);

    function doStuff(event) {
        event.stopPropagation();
        counter++;
        var $div = $(this),
            $sub = $('<div />', {'class':'sub',
                                 title  : 'subsub',
                                 text   : 'subsub' + counter,
                                 on     : {
                                            click : doStuff
                                          }
                                }
        );

        $div.append($sub);
    }
});