-1

I'm having an issue with ajax generated selectors.

basically i have a start button in default state. onclick, it starts something, and then the click also brings in a new div from an ajax call with results. one of these items is the stop button. my linked script from the main page has a click event attached to this stop button

<a id="stop">stop</a>

If I put the script inline, in the return call it self that also prints the anchor, i can access it with

$('#stop').click(function() {   });

However, I don't want the script there (as there are multiple items per page and it makes much more sense to have it in the main linked resource). If this call is in the linked sheet from the main page, nothing happens.

Why is this?

Is there another 'document ready' wrapper i should use to address return elements?

0

3 Answers 3

2

If

<div id="container"></div>

is the element which you're appending the results of the ajax call to,

You want to do:

$('#container').on('click', '#stop', function() { console.log('test'); });

Alternatively you could do something like

$('#stop').live('click', function(){ console.log('test'); });

But I wouldn't recommend that if you are going to have a lot of events on the page to handle, because live adds overhead every time it's used.

1
  • Coming back to this question 2+ years later and looking at what you did wrong is always fun. Using the delegated event on the static parent now of course :) Switched my answer to this as it is the most "correct" way IMO
    – BReal14
    Jul 9, 2015 at 15:51
2

My understanding of your issue is that the click event you create does not fire for elements added through ajax. When you attach the handler to the click event of an element, this ONLY occurs for those elements which are currently in the DOM. You have a few options to get the behavior you desire.

1) Use the inefficient "live" handler. (inefficiency measured in milliseconds generally)

$('#stop').live('click', function(){});

2) Reattach the event handler after the element has been inserted into the DOM.

$.ajax({
    complete: function(){
        $('#idOfTheElementsYouJustInserted').click(function(){});
    }
});

3) Attach an event handler to a static parent element, so that when the button is clicked, the event "bubbles" up and triggers this event. To refer to the element that created the bubble, you can use event.target where event is the default parameter passed to the function.

$('#staticParentElement').click(function(event) { var elementClicked = event.target;   });
3
  • Can you elaborate on #2 a bit more? this is a HEAVY page, so #1 sounds like a no-go. #3 seems also like it may be an issue as there are multiple a's in this element (its a ul list)
    – BReal14
    Feb 21, 2013 at 19:38
  • 1
    #2 is what you started with (you've included it in your question and stated it's not what you want). Go with #3. It's good. You just need a check to confirm that event.target is your #stop element.
    – Aidan Ewen
    Feb 22, 2013 at 14:26
  • Thanks, I've implemented #2 and it's working great now with the generated buttons. Appreciate it.
    – BReal14
    Feb 25, 2013 at 20:50
-2

Your main script isn't adding the event to your new element because it was run before the element existed.

Would it work to create the function in the main script and then simply specify the function when you add the event -

main script

var your_function = function() {
    // your code
}

then when you add the div -

$('#stop').click(your_function());

A nicer solution would be Brad M's suggestion of adding the event to a parent and processing it as it bubbles up.

3
  • 1
    You are correct in saying you can't add an event to an element before it exists, however you can add events to static parent elements such as the document. jQuery has a few tricks to automatically handle these situations. As for the setInterval thing, while that would technically work, it's an absolute hack of a solution. You can always just reattach the event handler after DOM insertion, there are no issues with synchronization with regards to doing that.
    – Brad M
    Feb 21, 2013 at 15:04
  • 1
    Not to mention, for all the event handlers you continue to attach to the button, an equal amount of handlers would execute for a single button click.
    – Brad M
    Feb 21, 2013 at 15:08
  • Yes, I think I'll remove the suggestion.
    – Aidan Ewen
    Feb 21, 2013 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.