jQuery Mobile动态列表项上的点击事件

Question

jQuery Mobile动态列表项上的点击事件

htmljquery-mobile

4

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

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

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

感谢任何关于如何使其正常工作或改进代码的建议。

谢谢， Cliff

以下是代码：

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

- cbrake

点击后应该发生什么？我在前三个上没有看到任何反应。 - zod

@zod，请在浏览器上打开开发者工具并切换到控制台选项卡。点击前三个选项卡以查看相关信息。 - saluce

2个回答

0

创建一个新的函数并调用它来处理默认和动态元素。

<a onclick="myfunction()">

- George-Paul B.

你的意思是将它添加到你为他们生成的HTML中吗？我认为被接受的答案更整洁。 - Rup

通过从 DOM（原始或附加的）调用函数，您可以跳过附加 jQuery 处理程序。编辑：我同意已接受的答案，只是发布了一个不同的解决方案。 - George-Paul B.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- saluce · Accepted Answer

使用这种形式的.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);