Question

我有多行，在行内部有一些功能，如增加减少值，复选框，价格等...基于价格我正在排序行。它正在生成正确但在创建行内部功能后无效。

HTML代码（点击私人代码）：

var categorysort = ["0 - 25", "25 - 50", "50 - 150", "150 and over"];

/images/up_arrow.png"> 类别

jQuery代码：

/* Sort by:- private start */   
$('.sort-by .private').on('click', function(){
    var items = $(".renderedItem");
    var privatestatus = "Private";
    $(".categorystatus").html("");      
    if(privatestatus = "Private"){
        var itemMainDiv = "<div style='' aria-expanded='true' id='categorylist0' class='panel-collapse collapse privatediv' />" ;
    }
    var collapsiblepanel = $( "<div class='collapsiblepanel collapsibleParentDiv' style='display:none'/>" ).append(
        $( "<div class='panel panel-default' />" ).append(
            $( "<div class='panel-heading' />").append(
                $('<div class="panel-title" />').append(
                    $('<div class="pull-left categoryblock" />').append(
                        $('<span class="categorytext" />').text(privatestatus),
                        $('<span class="link visible-xs">').append(
                            $('<a href="#" />').text('view checklist')
                        )                               
                    ),
                    $('<span class="collapseexpand pull-right">').append(
                        $('<a class="collapsed" data-target="#categorylist0" data-toggle="collapse" href="#" aria-expanded="true"/>')
                    )
                )
            ),
            $(itemMainDiv)
        )
    );
    $(".categorystatus").append(collapsiblepanel);  

    items.each(function(index) {
        item = $(this);
        itemtype = item.attr("itemtype");

        if(itemtype == "Private") {
            $(".privatediv").append(item);              
        }
    });     

    var collPnlDivs = $('.collapsiblepanel');

    collPnlDivs.each(function( index ) {
        if($(this).find('.renderedItem').length > 0){           
            $(this).show();
        }           
    });     
}); 
/* Sort by:- private end */

Answer 1

这可能是因为当您动态加载内容时，您将在安装事件处理程序后将其插入页面。因此，动态内容上没有事件处理程序。

通常的解决方案是：

加载动态内容后安装事件处理程序。

或

切换到委托事件处理，该处理将使用动态创建的内容。

在委派事件处理中，将事件绑定到安装事件处理程序时存在的父项（即使子项内容尚不存在），然后使用事件冒泡来查看子项中发生的事件稍后动态加载的对象。如果你使用正确的.on()形式，jQuery会使这一切变得非常简单。

您可以在这些参考资料中阅读有关委派事件处理的更多信息：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

动态加载相同的dom元素后，现有功能无法正常工作

1 个答案: