4

我无法从列表项中获取点击事件。在此页面中：

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

列表中的第一个条目触发点击事件。但是，如果我通过按下“刷新更新列表”按钮动态添加 3 个事件，则接下来的 3 个列表条目不会生成单击事件。

感谢有关我如何使这项工作或总体改进代码的任何建议。

谢谢，克里夫

代码也列在下面：

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

2 回答 2

7

使用这种形式.on()（根据下面的评论）。

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

示例：http: //jsfiddle.net/saluce/YaAEJ/

否则，每当您动态添加新元素时，您都需要将点击事件附加到这些项目。

假设以下代码：

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

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

您可以取消绑定处理程序并重新附加到所有匹配项：

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

或者只是在添加后将其动态添加到新项目中：

$("#updateVersionsList").append('<li><a id="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>').on("click", doThisOnClick);
于 2012-07-12T18:48:07.330 回答
0

创建一个新函数并为默认和动态元素调用它

<a onclick="myfunction()">
于 2015-04-22T00:28:34.560 回答