jQuery .on() not working with long dynamic content on Android and css()

Question

I'm trying to bind interactions to dynamically loaded links:

HTML:

<div id="content">
    My dynamic content will be here.
</div>

JS:

$(function(){
    loadContent();
    $('#content').css('height',400);


    $('#content').on('click','a',function(){
        alert();
    });
});

This is working fine on desktop, and with a quite short content on Android.

But it will not work with longer content on Android (with no JS error on Eclipse). Yet, I have not identified any other differences but content length between working and not working pages. Therefore, I tried to artificially limit the length of the content, and then it is working fine.

Do you have any clues of what is happening ?

// EDIT

I updated the code as I had made some basic mistakes when typing this question. This version better reflects the core problem.

// EDIT

I finally managed to isolate what produced a conflict. It is due to a css update of the div after content being loaded. If I artificially remove the height style attribute using Weinre, then the links are clickable again!

You shouldn't need to, but put the click event handler assignment code inside the document.ready block, after `loadContent()` — Reinstate Monica Cellio, Oct 03 '13 at 10:41

score 0 · Answer 1 · answered Oct 03 '13 at 10:42

0

I can't see how this is working on desktop at all because the on() call should be inside the DOM ready handler, and the event name should come before the filtering element, like this:

$(function(){
    loadContent();

    $('#content').on('click', 'a', function(e) {
        alert('something');    
    });
});

answered Oct 03 '13 at 10:42

Rory McCrossan

331,213
40
305
339

Thanks. Those were typos that I fixed in the question. But it's not working better. – Yako Oct 03 '13 at 11:45
By the way, I also tried to bind the click action after content was loaded, using a deferred object. But it didn't work either. – Yako Oct 03 '13 at 11:56

score 0 · Answer 2 · answered Oct 03 '13 at 10:49

First, fix your document ready function to wrap loadContent and on.

Second, If you load content after the page is loaded. you should bind event to the body like this

$(function(){

    loadContent();

    $('body').on('click', '#content a', function(){
        alert('Hello world!');
    });

});

jQuery .on() not working with long dynamic content on Android and css()

2 Answers2