Jquery 动态加载同一dom元素后现有功能不起作用
我有多行,行内有一些功能,如增加减少值,复选框,价格等。基于价格,我排序的行。它正在正确生成,但创建行后内部功能不起作用 HTML编码在私有上单击: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(
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元素。因此,它们适用于原始内容,但不适用于新替换和排序的内容。