clone & live function with context parameter jquery 1.4

Question

Hi,

I have few div HTML elements and i am cloning it with a clone(true) option as i want to copy the events also.

Now the case there are certain click events in my HTML div blocks and while crating events i use context parameter also like

var $block ="<div class='task-create-content' >"+
                 "<div class='task-create-preview'>"+
                      "<div class='items'>" +
                           "<div><input type='text' class='edit wtp'/></div>" +
                           "<div><input type='text' class='edit wtp'/></div>" +
                      "</div>"+
                 "</div>");

$(".wtp", $block).live('click',function() {
     alert("hi");
})

Now , when i clone this block using clone(true), click event doesn't get fire even if i am assigning context parameter.

Answer 1

The .live() method needs the actual selector to match the element against.

Try this:

$(".task-create-content .wtp").live('click',function(){
     alert("hi");
});

It uses that selector at the root of the document to see what exactly received the click event. If there's a match, it fires the handler for that selector.

It seems as though you're assigning handlers directly for newly created elements. If you want to do that, use .bind().

$(".wtp",$block).bind('click',function(){
     alert("hi");
});

...which is the same as doing:

$(".wtp",$block).click(function(){
     alert("hi");
});

---

EDIT:

The correct A couple of ways to confine a live() event to $block would be to pass $block as a third argument to live().

$(".wtp").live('click',function(){
     alert("hi");
}, $block); // The handler is placed on $block and fired for .wtp elements within

...which is the same as using .delegate()

  // The handler is placed on $block and fired for .wtp elements within
$block.delegate('.wtp', 'click', function(){
     alert("hi");
});

jQuery's .delegate() just nicer packaging for passing the third argument to .live(). It just reorders the arguments, and calls .live().

http://github.com/jquery/jquery/blob/master/src/event.js#L875

Answer 2

First, You have an extraneous closing parenthesis at the end of your $block declaration:

var $block = ...  "</div>");

This would stop the whole page from working.

---

Second, if you use a context as part of the live(), then the context has to be a single DOM elemnt.... it cannot be a string. To create a single DOM element, simply make use of jQuery ( $block = $("...");, so you should do:

var $block =$("<div class='task-create-content' >"+
                 "<div class='task-create-preview'>"+
                      "<div class='items'>" +
                           "<div><input type='text' class='edit wtp'/></div>" +
                           "<div><input type='text' class='edit wtp'/></div>" +
                      "</div>"+
                 "</div>");

Then when you refer to $block you will be referring to a DOM element. The context cannot simply be $block, since you want to bind the click function to a $block that is actually on the page in question, so you have to specify which $block/s. To do this use $(".wtp", $block[0]).

$(".wtp", $block[0]).live('click',function() {
     alert("hi");
})

I pick as the context the first $block in the DOM. You can substitute a variable for the index or do this some other way.

working jsFiddle example

---

Working with clones

Instead of using live(), I would use bind() to work with clones... like this:

Remember that $block must be a DOM element in this case too, so you have to define $block like:

$block = $(" ... ");

Then you can use and clone $block like this:

$(".wtp", $block).bind('click',function() {
     alert("hi");
})

$($block).clone(true).appendTo("body");

  // Let's change $block dynamically!
$("<div>Dynamic!</div>").appendTo($block);

$($block).clone(true).appendTo("body");

Make sure you include true when you clone so that you indicate that the event handlrs should be copied too.

jsFiddle example