jQuery live scheint das Klick-Ereignis nicht zu binden

Question

Die dynamisch hinzugefügten Links (Klassennamen .divToggle und .removeDiv) funktionieren nur, wenn sie beim ersten Mal zweimal angeklickt werden. Woran liegt es, dass sie nicht sofort richtig funktionieren?

$(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 tut nicht sofort etwas. Es werden lediglich Klick-Ereignisse an die ausgewählten Elemente gebunden, so dass in Zukunft beim Klicken eine der beiden Funktionen aufgerufen wird. Der erste Klick tut also nichts anderes, als den Toggle-Event-Handler einzurichten. Der zweite Klick ruft tatsächlich den Toggle-Event-Handler auf. (Und fügt außerdem eine andere Toggle-Event-Handler! Der dritte Klick ruft also zwei Toggle-Event-Handler, usw.).

.toggle ist eine Alternative zu .click Bindung, nicht etwas, das man (normalerweise) innerhalb einer .click Ereignisbehandler.

Es gibt keine "Live"-Version von toggle aber Sie können selbst eine schreiben, z. B.:

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

Es ist ein langer Versuch, aber es ist, weil Sie event.preventDefault; vor allen anderen Code haben? Ich verwende dies normalerweise als letzte Anweisung in meiner Funktion.

Wie ich schon sagte, es ist ein Versuch, aber es lohnt sich!

Haben Sie versucht, eine Javascript-Warnung anzuzeigen oder Firebugs Log-Fenster zu verwenden, um zu sehen, ob das Ereignis beim ersten Mal ausgelöst wird? Vielleicht wird es ausgelöst, aber nicht das tun, was Sie erwarten, und etwas anderes verursacht es zu scheitern?

Answer 3

Das ist es, was ich am Ende hatte. Scheint zu funktionieren ok.

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

});