Dynamic selectors in jquery

Question

I have a code similar to this, where I assign a function to the click even that change the style

$(".style1, .style2", "#section").click(function () {
    changeStyle($(this));
});

it might happens that the item change from style1 to style2, so the item should be still clickable, but the actions doesn't take effect. Seems that the item list $(".style1, .style2", "#section") is created on load and is not updated when i the stile is changed to include new elements.

I have tried to put the pasted code into a function and call it at the end of the function changeStyle, but this adds another trigger, so when I click in other items with style1 or style2, the actions trigger 2, 3, 4, ... times. And I just one to trigger it once.

How can I solve it?

Thanks for your help.

score 0 · Answer 1 · answered Apr 25 '11 at 10:13

0

Try changing your use of 'click' to live. So,

$(".style1, .style2", "#section").live("click", function (e) {
  changeStyle($(e.target));
});

Live means that the selector test is done on click rather than on page load. You can see the documentation here: http://api.jquery.com/live/

answered Apr 25 '11 at 10:13

Andy Hume

40,474
10
47
58

This could work too, but there's a lot of discussion now about the evils of `.live()` as opposed to `.delegate()` or even vanilla `.bind()`. Didn't know about them until recently myself! http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate – Richard Neil Ilagan Apr 25 '11 at 10:20
thank you very much Andy, that solved my problem. It also works with `function () { changeStyle($(this)); }` – David Apr 25 '11 at 10:40
thanks Richard too for the link to the discussion, and your answer. Very usefull both! – David Apr 25 '11 at 10:48

score 0 · Accepted Answer · answered Apr 25 '11 at 10:18

I don't exactly understand your problem completely, but it sounds like you're creating new elements and dynamically adding event handlers to them dynamically as well.

If this is your problem, you just need to use .delegate(), which will ensure that an event handler is attached to both existing and dynamically created elements later in the lifecycle of your page. This way, you don't have to keep assigning event handlers every time you create an element.

$('#section').delegate('.style1,.style2', 'click', function() {
    changeStyle($(this));
});

Additionally, your changeStyle() function sounds like it can benefit a lot from .toggleClass() or a similar jQuery function.

Dynamic selectors in jquery

2 Answers2