jQuery next () не работает с live ()

Question

Когда я пытаюсь использовать метод 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()?

Answer 1

Глядя на HTML, вы не должны утверждать:

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

be:

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

Answer 2

Пока у вас есть рабочий ответ, я хотел оставить предложение о переключении - и +, я бы предложил использовать 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);
});

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

Справочные материалы:

• html().
• live().
• on().
• text().