javascript - 在 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

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

$(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');                      
    }
});         

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

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery doc