Jquery 动态加载同一dom元素后现有功能不起作用

Jquery 动态加载同一dom元素后现有功能不起作用,jquery,Jquery,我有多行,行内有一些功能,如增加减少值,复选框,价格等。基于价格,我排序的行。它正在正确生成,但创建行后内部功能不起作用 HTML编码在私有上单击: var categorysort = ["0 - 25", "25 - 50", "50 - 150", "150 and over"]; /图像/向上箭头.png> 类别 jQuery代码: /* Sort by:- private start */ $('.sort-by .private').on('click', function(

我有多行,行内有一些功能,如增加减少值,复选框,价格等。基于价格,我排序的行。它正在正确生成,但创建行后内部功能不起作用

HTML编码在私有上单击:

var categorysort = ["0 - 25", "25 - 50", "50 - 150", "150 and over"];
/图像/向上箭头.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 */

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

通常的解决办法是:

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

切换到委托事件处理,它将处理动态创建的内容。 在委托事件处理中,即使子内容尚不存在,也要将事件绑定到安装事件处理程序时存在的父对象,然后使用事件冒泡来查看随后动态加载的子对象中发生的事件。如果使用正确的.on格式,jQuery将使这一切变得非常简单

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


使用jquery搜索事件委派…所有人都尝试了使用委派的所有可能方式。有些事情出错了,我不知道是什么。@Rohit-如果您不透露您尝试的确切代码,我们无法帮助您找出在尝试委托事件处理时出错的原因。如果做得好,它就会工作。这应该在我的答案和中的参考文献中得到很好的解释。事实上,当我加载页面时,功能正常,但在对行进行排序之后,内部功能停止工作。在加载动态内容后安装事件处理程序是什么意思?@Rohit-排序函数正在从头开始重新创建新内容—全新的DOM元素。新内容上不会有任何事件处理程序。因此,如果您希望该内容中的单击可以执行某些操作,那么将不会有任何处理程序使单击事件工作。在您的代码中的某个地方,您没有向我们展示,您的代码在项目上安装了click事件处理程序,以使clicks做一些事情。这些事件处理程序只应用于运行它时存在的DOM元素。因此,它们适用于原始内容,但不适用于新替换和排序的内容。