JQuery Live не связывает событие клика

Question

Динамически добавляемые ссылки (имена классов .divToggle и .removeDiv) работают только при двойном нажатии в первый раз. Что мешает им работать правильно сразу?

$(document).ready(function(){
// adds click event to links.
$('a.divToggle').live('click', function(event) {
    // Toggles the visibility of divs.
    event.preventDefault;
    $(this).toggle(function(){
            $(this).next(".divToToggle").slideUp("slow");
            $(this).text("show[+]");
    },
    function(){
            $(this).next(".divToToggle").slideDown("slow");
            $(this).text("hide[-]");
    });     
});

// used to remove divs from the page.
$("a.removeDiv").live("click", function(event) {
    event.preventDefault;
    $(this).parent().prev("a").prev("h2").remove();
    $(this).parent().prev("a").remove();
    $(this).parent().next("br").remove();
    $(this).parent().remove();  
}); 

// Used to add new divs to the page.
$(".addDiv").click(function(){
    $("<h2>Title Area</h2><a href='#' class='divToggle'>hide[-]</a>"
    + "<div class='divToToggle'><a href='#' class='removeDiv'>Remove this div</a>"
    + "<ul><li>List element 1</li><li>List element 2</li>"
    + "<li>List element 3</li></ul></div><br />").insertBefore($(this));
});

});

Answer 1

$(...).toggle ничего не делает сразу. Он просто привязывает события щелчка к выбранным элементам, так что в будущем щелчок вызывает одну из двух функций. Таким образом, первый щелчок делает только настройку обработчика события переключения. Второй щелчок фактически вызывает обработчик события переключения. (А также добавляет еще один обработчик событий переключения! Поэтому третий щелчок вызывает два переключателя событий и т. Д.)

.toggle - это альтернатива привязке .click, а не то, что вы (обычно) используете в обработчике .click.

Не существует «живой» версии toggle, но вы можете написать ее самостоятельно, например ::

function livetoggle(selector, f0, f1) {
    $(selector).live('click', function(event) {
        var t= $(this).data('livetoggle');
        $(this).data('livetoggle', !t);
        (t? f1 : f0).call(this, event);
    });
}


livetoggle('a.divToggle', function() {
    ...
}, function() {
    ...
});

Answer 2

Так вот чем я закончил. Кажется, работает нормально.

$(document).ready(function(){

// adds click event to links.
$('a.divToggle').live('click', function() {
   var testText = $(this).text();
   if(testText == 'hide[-]') {
    $(this).next('.divToToggle').slideUp('slow');
    $(this).text('show[+]');
   } else {
    $(this).next('.divToToggle').slideDown('slow');
    $(this).text('hide[-]');
   }
})

// used to remove divs from the page.
$('a.removeDiv').live('click', function(event) {
    $(this).parent().prev('a').prev('h2').remove();
    $(this).parent().prev('a').remove();
    $(this).parent().next('br').remove();
    $(this).parent().remove();
    return false;
});

// Used to add new divs to the page.
$('.addDiv').click(function(){
    $("<h2>Title Area</h2><a href='#' class='divToggle'>hide[-]</a>"
    + "<div class='divToToggle'><a href='#' class='removeDiv'>Remove this div</a>"
    + "<ul><li>List element 1</li><li>List element 2</li>"
    + "<li>List element 3</li></ul></div><br />").insertBefore($(this));
    return false;
});

});

Answer 3

Это длинный выстрел, но это потому, что у вас есть event.preventDefault;перед всем другим кодом?Обычно я использую это как последнее утверждение в моей функции.

Как я уже говорил, это длинный выстрел, но стоит попробовать!

Вы пытались показать предупреждение javascript или использовать окно журнала Firebugs, чтобы увидетьесли событие запускается в первый раз?Может быть, его увольняют, но вы делаете не то, что ожидаете, и что-то еще вызывает его сбой?