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

Question

如果 li 具有 ul，则将 + 附加到与此 li 最接近的类 - 。子菜单。这个 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()

Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

$( 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");
        });
    }
  }
});