[kukuviza]

Hello,
I have this situation

<ul>
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>

Then I have a script that adds some classes to the list above with something like this

<ul>
<li class="item infocus">something 1</li>
<li class="item">something 2</li>
<li class="item">something 3</li>
</ul>

ok, now I want to add some code when I click the infocus element but I cannot get control of it

I try with

         $('.infocus').click(function () {
              some code
       });

but this works only with classes that are in the original html source code, not with added classes. Is it possible? Where is my error?

[Kruithne]

Hello,

What you want to do is bind the events to the document rather than the element, because the element does not exist on page load, however the document does. Make sure you bind events when the document is ready, not before.

$(document).ready(function()
{
	$(document).on('click', '.infocus', function()
	{
		// Some code here
	});
});

[JackOfAllTrades]

Moved to jQuery

[kukuviza]

Thank you so much, it worked like charm! :-)

[BobRodes]

From the jQuery doc on on:

Quote

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

Nice example of this. Interestingly, it looks like this is saying that you can even do this outside the document ready function.

This post has been edited by BobRodes: 07 November 2012 - 09:32 PM

[Kruithne]

Quote

Nice example of this. Interestingly, it looks like this is saying that you can even do this outside the document ready function.

Well, the document element is available for manipulation when you attach the .ready() function too it, otherwise you wouldn't be able to. However, it is good practice (at least in my opinion) to keep all bindings inside the scope of the ready function.

[BobRodes]

Agreed. Can do something doesn't mean ought to, and that's sure as hell true in javascript/jquery.