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

您将需要在ajax success处理程序之后绑定事件。

执行此操作

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 2

我可能会看看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 3

请按如下所示尝试代码的第一部分：

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

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

3 个答案: