代码之家 › 专栏 › 技术社区 › Dipak

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

ajax jquery

Dipak · 技术社区 · 6 年前

如果 li 有 ul ,然后追加 + 为了这个 锂 最近类 - .submenu . 这个 jQuery公司 函数在同一页上工作,但当我尝试在 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>

3 回复 | 直到 6 年前

Gildas.Tambo 6 年前

我可以看看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");
        });
    }
  }
});

Manoz 6 年前

在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 请求。所以我们需要把代码放在这里 成功 )还有。

注意 -别忘了解除单击事件的绑定 .submenu 以防止多个事件注册。正如你所看到的 .off 若要在注册事件之前解除绑定,则一次只能注册一个事件,即 .click 你的情况。

Himanshu Upadhyay 6 年前

请您这样尝试代码的第一部分:

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