6 Replies - 1437 Views - Last Post: 17 November 2012 - 12:25 PM

#1 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-August 12

Can't control a dynamic added class

Posted 02 November 2012 - 07:58 AM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: Can't control a dynamic added class

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 439
  • Joined: 28-July 09

Re: Can't control a dynamic added class

Posted 02 November 2012 - 08:01 AM

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

Was This Post Helpful? 2
  • +
  • -

#3 JackOfAllTrades  Icon User is online

  • Saucy!
  • member icon

Reputation: 5954
  • View blog
  • Posts: 23,219
  • Joined: 23-August 08

Re: Can't control a dynamic added class

Posted 02 November 2012 - 08:22 AM

Moved to jQuery
Was This Post Helpful? 1
  • +
  • -

#4 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-August 12

Re: Can't control a dynamic added class

Posted 02 November 2012 - 09:00 AM

Thank you so much, it worked like charm! :-)
Was This Post Helpful? 0
  • +
  • -

#5 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 571
  • View blog
  • Posts: 2,979
  • Joined: 19-May 09

Re: Can't control a dynamic added class

Posted 07 November 2012 - 09:24 PM

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

Was This Post Helpful? 0
  • +
  • -

#6 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 439
  • Joined: 28-July 09

Re: Can't control a dynamic added class

Posted 08 November 2012 - 02:14 AM

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.
Was This Post Helpful? 0
  • +
  • -

#7 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 571
  • View blog
  • Posts: 2,979
  • Joined: 19-May 09

Re: Can't control a dynamic added class

Posted 17 November 2012 - 12:25 PM

Agreed. Can do something doesn't mean ought to, and that's sure as hell true in javascript/jquery.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1