1

I'm using drupal, with a chat module that creates divs for each chat. Because it's an external module, I don't want to modify the code. My question is this:

Is there a way for jquery to trigger an event if another script creates a div? Would I have to test every X seconds, or something like that?

Trevor Newhook
  • 889
  • 1
  • 11
  • 29
  • Please post some HTML example – thecodeparadox Jun 15 '12 at 08:40
  • You could attach an event listener to a certain div, and check if something has been created in that div – mas-designs Jun 15 '12 at 08:40
  • If the object isn't created yet, you cant bind a listener to it.. We need to see code on how the `div` is being generated. – Control Freak Jun 15 '12 at 08:42
  • Actually, it's child divs being created dynamically inside a parent div. I do know the id of that parent div, so an event listener might work. I'm just not sure which one to use. I want to add an onclick to a div that I don't know the ID of. @dbaseman - I need to support IE, which means that nothing newer than the Stone Age will work correctly :P a little more clarification: There is a parent div with a set ID. Inside that is a
      , with
    • . Nothing has ids. The div that I want to attach a handler to has a class, not an id. I hope that helps.
     – Trevor Newhook Jun 15 '12 at 14:14
  • You should use [`live()`](http://api.jquery.com/live/). See my updated answer. – fragmentedreality Jun 15 '12 at 16:03

3 Answers3

1

Maybe something like this:

$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});

With that you could check if something has been added to a certain div. So if something has been inserted in myDiv it would trigger an event which you listen to, and then take certain actions.

mas-designs
  • 7,498
  • 1
  • 31
  • 56
  • FWIW, mutation events are [not supported](http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents) by IE. – VisioN Jun 15 '12 at 08:46
  • IE9 supports them – try the [fiddle](http://jsfiddle.net/fragmentedreality/yRARy/1/) from my [answer](http://stackoverflow.com/a/11047724/834309) with it. – fragmentedreality Jun 15 '12 at 15:53
1

This is what the new mutation event spec is for. Even though it's still in the early stages, you might be able to use it depending on what browsers you need to support.

Feature-detect: mutation-event availability in JavaScript?

Community
  • 1
  • 1
McGarnagle
  • 101,349
  • 31
  • 229
  • 260
0

If the clients browser supports it you can do like in this fiddle:

</div>
    <input type="button" onclick="javascript: create_div();" value="create"/>
    <div id="div-area"></div>​
    <script>
    function create_div() {
        $('#div-area').append('<div class="chatdiv">new chat</div>');
    }
    $(document).ready(function() {
        $('#div-area').bind('DOMNodeInserted', function(e, o) {
            $(e.target).css('background', 'red');
        });
    });
    </script>
</div>

According to your comment you need to register to the onclick. This is what live() is for:

</div>
    <input type="button" onclick="javascript: create_div();" value="create"/>
    <div id="div-area"></div>​
    <script>
    function create_div() {
        $('#div-area').append('<div class="chatdiv">new chat</div>');
    }
    $(document).ready(function() {
        $('#div-area div.chatdiv').live('click', function(e, o) {
            $(e.target).css('background', 'red');
        });
    });
    </script>
</div>

jsfiddle.

fragmentedreality
  • 1,287
  • 9
  • 31
  • You are right. You should rather use [`on()`](http://api.jquery.com/on/). As you can read in the documentation, `e` and `o` are parameters passed to the function by the event. They are - as all params in Javascript - optional but help you identify the object that caused the event to fire. I added the `on()`-stuff to the fiddle. It works, too. – fragmentedreality Jun 18 '12 at 06:52
  • And yes, you can bind to `li` instead of a `div`. See the [fiddle](http://jsfiddle.net/fragmentedreality/zu344/2/) for details of selecting the content. – fragmentedreality Jun 18 '12 at 06:58