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 に答える