2011-01-17 3 views
1

Когда я пытаюсь использовать метод jQuery next(), он не работает с live().jQuery next() не работает с live()

Во-первых, вот мой код:

$(".toggle_button").live('click', function() { 
    $(this).html($(this).html() == '-' ? '+' : '-'); 
    $(this).next(".info_section").toggle(400); 
}); 

Вот HTML

<div class='section_toggle_container'> 
    <div class='toggle_button'>-</div> 
    <strong>Driver Information:</strong> 
</div> 
<div class='info_section'> 
    info here 
</div> 

ли проблема может быть, лежит в том, что .toggle_button вложен, что делает .info_section недостижим?

Вторая линия отлично работает, потому что она модифицирует элемент, учитывая событие live(). Третья строка, однако, заключается в том, где проблема. Это потому, что он использует next().

Может ли кто-нибудь помочь мне с решением для моей проблемы next()?

+0

Вам нужно будет показать HTML, на который это распространяется, я думаю. Возможно ли, что после элемента '.toggle_button' нет' .info_section'? Или вы уничтожаете 'this' с вызовом' .html() 'в строке выше? Попробуйте вместо этого использовать '.text()'. – Orbling

+1

можем ли мы увидеть ваш HTML-код? – amosrivera

+0

В чем проблема? ** Как выглядит ваш HTML-код?** 'next()' будет возвращать только элемент ** тогда и только тогда, когда ** следующий родной брат 'this' имеет класс' info_section'. Это ** не ** возвращает следующего брата с классом 'info_section'. –

ответ

3

Глядя на HTML should't ваше заявление:

$(this).next(".info_section").toggle(400); 

быть:

$(this).parent().next(".info_section").toggle(400); 
1

В то время как у вас есть рабочий ответ, я хотел бы оставить предложение о вашем переключени в - и +, я бы предложил использовать text() вместо HTML и с использованием встроенного text (для text(), html для html()):

$(".toggle_button").live('click', function() { 
    $(this).text(function(index,text) { 
     return text == '-' ? '+' : '-'; 
    }); 
    $(this).parent().next(".info_section").toggle(400); 
}); 

И, кроме того, я предложил бы кэшировать ваш $(this), если вы звоните его больше, чем когда-то это стоит использования кэширования для предотвращения того, чтобы воссоздать его в дальнейшем, что приводит к:

$(".toggle_button").live('click', function() { 
    var $this = $(this); 
    $this.text(function(index,text) { 
     return text == '-' ? '+' : '-'; 
    }); 
    $this.parent().next(".info_section").toggle(400); 
}); 

Из Конечно, если вы используете версию JQuery больше, или в том числе, 1,7, то вы должны использовать метод on(), а не (с JQuery 1,7) осуждается live(), который дал бы:

$(".toggle_button").on('click', function() { 
    var $this = $(this); 
    $this.text(function(index,text) { 
     return text == '-' ? '+' : '-'; 
    }); 
    $this.parent().next(".info_section").toggle(400); 
}); 

Это действительно совет, но, к сожалению, отправлен как ответ, чтобы предотвратить вхождение непонятного кода в комментарий.

Ссылки:

Смежные вопросы