Если li имеет ul в загруженном содержимом ajax
Если 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>
Ответы 3
Не могли бы вы попробовать первую часть вашего кода следующим образом:
$(document).find('.submenu').parent().each(function(){
if ($(this).children("ul").length) {
$(this).find('.submenu').html('+');
}
})
Вам нужно будет привязать события после обработчика 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.
Я могу взглянуть на метод 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");
});
}
}
});
о, понятно, спасибо !! @Manoz