Geek Answers Handbook

JQuery events for mobile events in dynamic list items

I'm having problems with click events from list items. On this page:

http://bec-systems.com/list-click.html

The first entries in the list trigger click events. However, if I dynamically add 3 more events by clicking the Refresh Update List button, the following 3 lists do not generate click events.

Evaluate any suggestions as to how I can do this work, or generally improve the code.

Thanks Cliff

The code is also listed below:

<!DOCTYPE html> <html> <head> <title>Status</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#refreshUpdateButton").on("click", function(event, ui) { console.log("refreshUpdateButton") versions = ["0.3", "0.4", "0.5"] for (var i=0; i < versions.length; i += 1) { $("#updateVersionsList").append('<li><a id="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>'); if ($("#updateVersionsList").hasClass('ui-listview')) { $("#updateVersionsList").listview("refresh"); } else { $("#updateVersionsList").trigger('create'); } } }) $('[id^=updateVersionItem]').on("click", function(event, ui) { console.log("updateVersion, selected = " + $(this).attr('id')); }) }); </script> </head> <body> <!-- Software update page --> <div data-role="page" id="software-update-page"> <div data-role="header"> <h1>Software Update</h1> </div><!-- /header --> <div data-role="content"> <h1>Select Software version:</h1> <ul data-role="listview" id="updateVersionsList"> <li><a id="updateVersionItem-0">0.0</a></li> <li><a id="updateVersionItem-1">0.1</a></li> <li><a id="updateVersionItem-2">0.2</a></li> </ul> <br> <a data-role="button" class="ui-btn-left" id="refreshUpdateButton">Refresh Update list</a> </div><!-- /content --> </div> </body> </html>
+4
source share
2 answers

Use this .on() form (in the comments below).

  $(document).on("click", '[id^=updateVersionItem]', function(event, ui) { console.log("updateVersion, selected = " + $(this).attr('id')); })

Example: http://jsfiddle.net/saluce/YaAEJ/

Otherwise, whenever you dynamically add new elements, you need to attach the click event to these elements.

Assuming the following code:

 function doThisOnClick(event, ui) { console.log("updateVersion, selected = " + $(this).attr('id')); } $('[id^=updateVersionItem]').on("click", doThisOnClick);

You can either untie the handler or bind it to all the relevant elements:

 $('[id^=updateVersionItem]').off("click", doThisOnClick); $('[id^=updateVersionItem]').on("click", doThisOnClick);

Or simply dynamically add it to new elements after adding it:

 $("#updateVersionsList").append('<li><a id="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>').on("click", doThisOnClick);
+7
source

create a new function and call it for standard and dynamic elements

 <a onclick="myfunction()">
0
source

More articles:


All Articles