如果李在ajax加载的内容中有ul

Question

如果li有ul，则将+附加到此li最接近的类- .submenu。这个jQuery函数在同一页面上工作，但当我尝试在ajax加载的内容上使用此函数时，它不起作用。ajax加载后如何正确使用？

$('.submenu').parent().each(function(){
if($(this).children("ul").length){
$(this).find('.submenu').html("+");
}
});
$(document).on("click", ".submenu", function(){
$(this).parent().find("ul").slideToggle("slow");
});

ul li{
list-style:none;
}
ul li ul{
display:none;
}
.cursorpointer{
cursor:pointer;
}

<ul>
<li>
<span class='submenu cursorpointer'></span>
<input type='radio' name='menu_id' value='sport'>Sports
<ul>
<li>
<input type='checkbox' name='subnav[]' value='fb'>Football
</li>
<li>
<input type='checkbox' name='subnav[]' value='vb'>Volleyball
</li>
</ul>
</li>
</ul>
<ul>
<li>
<span class='submenu cursorpointer'></span>
<input type='radio' name='menu_id' value='vehicle'>Vehicle
<ul>
<li>
<input type='checkbox' name='subnav[]' value='car'>Car
</li>
<li>
<input type='checkbox' name='subnav[]' value='cycle'>Cycle
</li>
</ul>
</li>
</ul>

Answer 1

我可以看看jQuery方法.ajaxComplete((

每当Ajax请求完成时，jQuery就会触发ajaxComplete事件已在此时执行.ajaxComplete((方法。

$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});

你的代码应该是这样的：

var url = "http://....",
container = $(".AjaxContainer");
$.ajax({
url: url,
type : 'get',
complete : function( qXHR, textStatus ) {           
if (textStatus === 'success') {
var data = qXHR.responseText 
container.append(data); 
$('.submenu').parent().each(function(){
if($(this).children("ul").length){
$(this).find('.submenu').html("+");
}
});
$(document).on("click", ".submenu", function(){
$(this).parent().find("ul").slideToggle("slow");
});
}
}
});

Answer 2

您需要在ajaxsuccess处理程序之后绑定事件。

做这个

success :function(data){
//your code what you do with data in success.
$('.submenu').parent().each(function(){
if($(this).children("ul").length){
$(this).find('.submenu').html("+");
}
});
$(document).off("click", ".submenu");
$(document).on("click", ".submenu", function(){
$(this).parent().find("ul").slideToggle("slow");
});
}

我假设您的DOM是在ajax请求之后动态添加元素的。这就是为什么我们也需要把代码放在这里(在success中(。

注意-不要忘记从.submenu取消绑定点击事件，以防止多个事件注册。正如您所看到的，我已经在.off注册之前将其解除绑定，这样您一次只能获得一个事件注册，在您的情况下，这就是.click事件。

Answer 3

你能试一下你代码的第一部分吗：

$(document).find('.submenu').parent().each(function(){
if ($(this).children("ul").length) {
$(this).find('.submenu').html('+');
}
})