在 document.ready 事件之后插入到页面的 DOM 的 jQuery 事件

Question

我编写了一个选择类别的代码，它适用于父类别，但不适用于子类别。

场景：父猫是由页面加载加载的 DOM 元素列表，但是当我单击其中一个时，它会发出 ajax 请求并检索其子元素的列表，然后将它们呈现在页面中。这样，一个新的 DOM 列表被点击，现在下面的 javascript 代码负责将点击事件附加到生成的子猫上。但是，它不起作用，没有控制台错误没有其他任何东西，好像根本没有JS一样。

//***** SELECTING CHILD CATEGORIES *****/
            var child_cat = $('.new-child-item');
            child_cat.click(function(){alert("AAA");});
            child_cat.on('click', function(){
                console.log("Very Fine");
                if($(this).hasClass('active-child'))
                {
                    $(this).addClass('new-child-item');
                    $(this).addClass('inactive-child');
                    $(this).removeClass('active-child');    
                }
                else
                {
                    $(this).addClass('new-child-item-active');
                    $(this).addClass('active-child');
                    $(this).removeClass('inactive-child');                      
                }
            });         
            //**** SELECTING CHILD CATEGORIES ***/

这是当用户点击其父级时生成的子猫：

<div style="display: block;" class="new-item-cats-list-holder clearfix"><div class="inactive-child new-child-item" id="5">
                نرم افزار       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="6">
                سخت افزار       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="7">
                ICDL       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="8">
                شبکه       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="9">
                برنامه نویسی       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="10">
                طراحی       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="11">
                اینترنت       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="12">
                طراحی سایت       
                </div><label class="new-item-side-label"></label><div class="inactive-child new-child-item" id="13">
                تایپ       
                </div><label class="new-item-side-label"></label></div>

Answer 1

您需要动态添加元素的事件委托。使用其他版本的on() 进行事件委托。

$(document).on('click', '.new-child-item', function(){
    console.log("Very Fine");
    if($(this).hasClass('active-child'))
    {
        $(this).addClass('new-child-item');
        $(this).addClass('inactive-child');
        $(this).removeClass('active-child');    
    }
    else
    {
        $(this).addClass('new-child-item-active');
        $(this).addClass('active-child');
        $(this).removeClass('inactive-child');                      
    }
});         

您必须将事件委托给在执行事件绑定代码时存在的动态添加元素的 static 父级，或者您可以委托给 document/body。

委托事件的优点是它们可以处理来自 以后添加到文档中的后代元素。经过 选择一个保证在该时间存在的元素 附加了委托事件处理程序，您可以使用委托事件 避免频繁附加和删除事件处理程序，jQuery doc

Answer 2

“点击”方法为页面加载时创建的对象设置事件。要将事件添加到尚未创建的对象，您应该使用 'delegate' 方法 (http://api.jquery.com/delegate/)

此处的基本示例：http://jsfiddle.net/ka_tee_jean/N9EJS/

// initial event on category
$('.cat').on('click',function() {
    $(this).after("<br><span class='new-child-item'>I'm a sub cat</span>");
});

// This won't work cause there are no new-child-items yet
$('.new-child-item').on('click',function() {
    alert("I will never fire");
});

// tell jQuery that this event needs to fire on 
// existing and also on new instances of class new-child-item
// when they are created
$('body').delegate('.new-child-item','click',function() {
    alert("I will fire");
});