Question

我遇到了一个小问题，但似乎无法使其发挥作用。

我将此作为标记。

    <div id="label-group" class="label-group">
        <!-- Label Item -->
        <div id="label-1" class="label-item">
            <div class="label-line">
                <a href="#" class="btn btn-small btn-simple btn-assign-schedule">Assign Schedule to Label</a>
            </div>
            <div class="label-head clearfix"> 
                <div class="label-title">  
                    UK Call Menus 
                </div> 
                <div class="label-tools"> 
                    <a href="#" class="delete" title="Delete Label"></a>
                    <a href="#" class="moveup" title="Move Up"></a>
                    <a href="#" class="movedown" title="Move Down"></a>
                    <a href="#"  class="toggle" title="Open &amp; Close"></a> 
                </div>
            </div>
       </div>
   </div>

这个jQuery采用了所有标签工具链接，并在点击时添加了某些功能。

$(".label-group .label-tools a").each(function(){  
    $(this).on('click',function(e) {
        e.preventDefault(); 
        var li = $(this).closest(".label-item");

        if ($(this).hasClass('movedown')) {
                    li.css('opacity','0.5');
                    li.next().css('opacity','0.5');  
                    li.insertAfter(li.next()).animate({opacity:"1"},200); 
                    li.prev().animate({opacity:"1"},300);
        } else if ($(this).hasClass('moveup')) {
                    li.css('opacity','0.5');
                    li.prev().css('opacity','0.5');
                    li.insertBefore(li.prev()).animate({opacity:"1"},200);  
                    li.next().animate({opacity:"1"},300);
        } else if ($(this).hasClass('toggle')) {
                var liContent = $(this).closest(".label-head").siblings('.label-content');
                    liContent.toggle(0,function(){
                        li.toggleClass('label-open');  
                    });   
        } else if ($(this).hasClass('delete')) {
                    li.remove();   
        }
    })
})

当我动态地将另一个.label项添加到.label-group时，标签工具链接根本不起作用。

Answer 1

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

在动态生成元素或操作选择器（如删除和添加类）时，需要使用Event Delegation委托事件方法.on()。

即

$(document).on('event','selector',callback_function)

实施例

$(staticParentContainer).on('click',".label-group .label-tools a",function(e) {
    //Your existing code
});

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

jQuery - 在每个函数中附加click事件以动态添加内容

1 个答案: