[JS/jQuery] Using livequery: Can't find propagated element created via ajax.

Question

Hey guys,

I'm using jQuery 1.3.2 and Live Query plugin. The script needs to work in FF as well as IE6. Upgrading jQuery and using live instead isn't a possibility.

Somehow this script won't be called by the dynamically created element.

    $('select').livequery('change',function(){
      var select_id  = $(this).attr("id");                                                                            ...
...
...

});

$('select').livequery('mouseover',hideExtensions());

function hideExtensions(){
...
...
}

In both IE6 and FF, the function is correctly called by the static (already existing) elements. However, it's not being called by the dynamically created element.

What could be the reason?

Update I tested the same function with "live". It worked in FF, but not in IE6, of course not... That's why i'm looking for a workaround with livequery.

Answer 1

Is there a reason you can't upgrade to jQuery 1.4.2 and use the built-in live callback there?

If livequery isn't working, an alternative you can try is some "manual" event delegation with some core JavaScript, and rely on event bubbling to an immediate parent. Let's say you had a DOM structure like this:

<div id='something'>
    <a href='#' class='some-tag'></a>
    <a href='#' class='some-tag'></a>
    <a href='#' class='some-tag'></a>
    <!-- more dynamic elements 'a' tags identical to those above added here -->
</div>

And in your JavaScript:

var something = document.getElementById( 'something' );

something.addEventListener('click', function(e) {
    e = window.event || e;

    // If the target of the event is the added anchor we're looking for
    if (e['srcElement' in e ? 'srcElement' : 'target'].getAttribute('class') === 'some-tag')
        // code block goes here

    return false;

}, false);