jQuery Mobile 1.4.2 Click Event Not Firing After DOM Manipulation & Page Refresh

Question

I am trying to use single page mobile site. Basically I have a listview inside container and click event for list class.

<div role="main" class="ui-content">
  <ul data-role="listview" data-inset="true">
    <li class="listbtn">
      <a href="url"></a>
    </li>
  </ul><!-- /listview -->
</div><!-- /content -->

I have a script for firing "listbtn" click event

$(".listbrn").click(function(){

});

this is working fine when page loads for first time

On another event, I am pulling data and replacing the whole "listview" with new items.

After DOM manipulation is successful, I have used

$('.ui-page-active .ui-listview').listview('refresh');
$.mobile.activePage.trigger('create');

as suggested on other threads.

Up to this point everything is smooth, page refreshes with new items and CSS applied nicely as expected.

Only problem is "listbtn" click event is not firing after that.

While looking for answers, I found this thread and tried to use live as suggested but after changing to live page won't load at all. Loading gif images spins forever.

Any suggestion or ideas?

jQuery 2.0 jQM 1.4.2

Thanks

@Omar: I just replaced "document.ready" with on("pagecreate",function() but behavior is exactly same as before. — Deepak Shrestha, Mar 09 '14 at 07:50
i didn't notice that `.listbrn` are dynamically created. You need to delegate event `$(document).on("click", ".listbrn", function () { code });` — Omar, Mar 09 '14 at 08:29
YES...that was correct. It worked perfectly everytime! Thanks Omar — Deepak Shrestha, Mar 09 '14 at 08:43

score 2 · Accepted Answer · answered Mar 09 '14 at 09:58

You need to delegate event to dynamically added elements.

Another note, you don't need $.mobile.activePage.trigger('create');, .listview("refresh") is enough to re-enhance list-view. Not to mention that both $.mobile.activePage as well as .trigger('create') are deprecated and will be removed on jQM 1.5.

$(document).on("click", ".listbtn", function () {
  /* code */
});

Demo

jQuery Mobile 1.4.2 Click Event Not Firing After DOM Manipulation & Page Refresh

1 Answers1

Linked