[jQuery] Using live() within context of a node
Hello,<div>
</div><div>I am building a plugin and need to use live() to capture click events on elements with a configurable class name, but only if they are children of specific node (that may or may not have an ID).</div>
<div>
</div><div>For example, I want to create several containers (divs) on the page, and if any element with a class name of "close" within the container is clicked, it should remove the container.</div><div>
</div><div>I tried this using live():<br clear="all">
</div><div>var createContainer = function()</div><div>{</div><div> var container = $('<div></div>');</div><div> container.find('.close').live(function()</div>
<div> {</div><div> container.remove();</div><div> });</div><div> container.append('<span class="close">[close]</span>');</div><div> $(document.body).append(container);</div>
<div>};</div><div>
</div><div>The code works if there's only one container on the page. But if I create 2 or more containers, clicking the [close] on any of them will close all of them. It seems that live() is firing for any element on the page that contains a close class, but I only need it to fire in the container that was clicked.</div>
<div>
</div><div>I cannot use bind() or click() because the containers can be modified after they are created and all elements that contain the class "close" should close the container.</div><div>
</div><div>
Any workarounds for this? Do I have to write my own event delegation code to get this to work? Thanks for the help!</div><div>
--
Hector
</div>