Home/ Questions/Q 8210253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T10:00:51+00:00

I’m having trouble getting click events from list items. In this page: http://bec-systems.com/list-click.html The

  • 0

I’m having trouble getting click events from list items. In this page:

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

The first the entries in the list fire click events. However, if I dynamically add 3 more events by pushing the “Refresh Update List” button, the next 3 list entries do not generate click events.

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

Thanks,
Cliff

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use this form of .on() (per 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 the new elements, you need to attach the click event to those items.

    Assuming the following code:

    function doThisOnClick(event, ui) {
    console.log("updateVersion, selected = " + $(this).attr('id'));
}

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

    You can either unbind the handler and reattach to all matching items:

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

    Or just dynamically add it to the new items once you add it:

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