0

I have few divs which will be created by a script not in my control on the web page. These divs will be created after page has completely loaded, based on AJAX data. How can I associate onready event with these divs.

JDT
  • 109
  • 1
  • 2
  • 10
  • 2
    Can you show the code and how they're loaded? – tymeJV Oct 08 '13 at 17:52
  • possible duplicate of [Is there a jQuery DOM change listener?](http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener) – matewka Oct 08 '13 at 17:55
  • Why not just call some function to create these divs in ajax complete? – Cory Danielson Oct 08 '13 at 17:56
  • I don't have control on Ajax complete or access to it's source code. Also, will need a solution which works on all browsers, including mobile. – JDT Oct 08 '13 at 18:01
  • No access to code of Ajax. The div loaded will be
    old text
    . I will need to change it to
    new text
     – JDT Oct 08 '13 at 18:02
  • The best solution would be to fix *"I don't have control on Ajax complete or access to it's source code."* and improve that code so that it triggers an event you can listen for. – Kevin B Oct 08 '13 at 18:06
  • Some browsers offer mutation observers to catch child insertions, but if you know nothing about these divs it will be really hard to figure out when they are ready. – Christophe Oct 08 '13 at 18:07
  • You most definitely can access the source code that's sending the ajax request, and with that information, you may be able to override a piece of it that would allow you to perform this action. since we (the stackoverflow community) can't see said code, we can't help you with figuring out if that's possible. – Kevin B Oct 08 '13 at 18:08

3 Answers3

1

It sounds like you are looking for event delegation. jQuery's .on() method has a very simple approach to attaching event handlers to dynamically created elements. For example:

$( "#dataDiv" ).on( "click", "div", function() {
  $( this ).fadeOut();
});

That code will listen for click events on all current and future div elements within #dataDiv and then hide whatever was clicked on.

You can delegate all standard jQuery event types in this manner. Hope that helps!

Matthew Blancarte
  • 8,251
  • 2
  • 25
  • 34
0

You cannot but you can use event delegation if its about clicks/hovering etc. See http://api.jquery.com/on/#direct-and-delegated-events

artygus
  • 605
  • 4
  • 11
  • @JDT please post the code to jsfiddle or explain the reason why you can't access those div's from the code – artygus Oct 08 '13 at 18:09
0

If you have no control on the scripts, what you can do is use ajaxComplete() to check if your divs are present after each ajax request completes.

Christophe
  • 27,383
  • 28
  • 97
  • 140