There is no click event binding in jQuery live

Question

Dynamically added links (classnames.divToggle and .removeDiv) only work on the first click twice. What prevents them from working right away?

$(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 doesn't do anything right away. It simply associates the click events with the selected elements, so that in the future, the click calls one of the two functions that will be called. Thus, the first click does nothing but configure the switch event handler. The second click actually calls the switch event handler. (And also adds another transition event handler! So a third click brings up two event switches, etc.)

.toggle is an alternative to .click , not what you (usually) use inside a .click event .click .

There is no live version of toggle , but you can write it yourself, for example:

 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

This is a long shot, but that is because you have event.preventDefault; before all other code? I usually use this as the last expression in my function.

Like I said, this is a long shot, but worth a try!

Have you tried showing a javascript warning or using the Firebugs log window to see if this event is being fired for the first time? Maybe this is fired, but does not do what you expect, but something else leads to its failure?

Answer 3

So this is what I came across. It seems to be working fine.

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

});