11

設定：

table_1 の行がクリックされたときに、table_2 のテーブル セルを更新する jQuery 関数を作成しました。ここに私が書いたものがあります：

    <script type="text/javascript">
        $("tr").live('click',function() {
            var host = $(this);
            alert('A row in table 1 is clicked!');

            var count = host.find("td").eq(2).text();
            $("#myTable_2 tr:eq(0) td:eq(1)").text(count);
            $("#myTable_2 tr:eq(1) td:eq(1)").text(5);
        });
    </script>

問題：

FireBug を使用してこの関数をステップ実行すると、myTable_2 のセル データが変更されていることがわかります。しかし、クリックするたびに、関数は2回実行されます。クリックごとにアラート ボックスが 2 回表示されます。

なぜこれが起こるのか誰か教えてもらえますか？そして、これを回避する方法は？

4

5 に答える 5

12

クリックの伝播を避けるだけです

$("tr").live('click',function() {

        ...

        $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
    });
于 2013-02-11T13:53:41.533 に答える
11

次のいずれか:

  1. クリックされた行は別の行の内側にあります (2 つの行がクリックされます)。（例）
  2. 表示したコードは 2 回実行されます ( example )。

これを解決するには、セレクターをより具体的にします。jQuery 1.7+ を使用している場合は、.on代わりに次を使用しますlive: http://jsfiddle.net/6UmpY/3/

$(document).on("click", "#myTable_1 > tbody > tr", function() {
    // This selector will only match direct rows of the myTable_1 table

注:.onの代わりに使用liveしても問題は解決しませんでした。
より具体的なセレクターを使用すると、問題が修正されました。
あなたが好きならlive、次もうまくいくでしょう：http://jsfiddle.net/6UmpY/4/

$("#myTable_1 > tbody > tr").live("click", function() {
于 2012-05-06T19:34:07.643 に答える
3

table_1最初のテーブルのIDであると仮定します。

$("#table_1 tbody").on('click','tr', function() {
            var host = $(this);
            alert('A row in table 1 is clicked!');

            var count = host.find("td").eq(2).text();
            $("#myTable_2 tr:eq(0) td:eq(1)").text(count);
            $("#myTable_2 tr:eq(1) td:eq(1)").text(5);
        });

注: live()は廃止されたため、上記のように記述します。trセレクターは両方のテーブルに属し、イベントは 2 回バインドされるため、コードを 2 回実行します。

次のものも使用できますdelegate()。

$("#table_1 tbody").delegate("tr", "click", function(){
     var host = $(this);
     alert('A row in table 1 is clicked!');
     var count = host.find("td").eq(2).text();
     $("#myTable_2 tr:eq(0) td:eq(1)").text(count);
     $("#myTable_2 tr:eq(1) td:eq(1)").text(5);
});
于 2012-05-06T19:34:30.407 に答える
0

一部の要素には、見落とす可能性のある同じプロパティ (クラス名、タグ名など) がある場合があります。これにより、このような競合が発生する可能性があります。以下の例では、"tr" 要素がアラートのセレクターとして使用されていますが、スクリプトには "text" ターゲットを含む 2 つのネストされた "tr" 要素があります。したがって、1 回クリックするだけで、"tr" 要素ごとに (裏返しに) 個別にアラートが発生します。これをバブリングと呼びます。単純にstopPropogation()を使用してバブリングを停止できます。

$("tr").live('click',function() {
    alert('A row in table 1 is clicked!');
    event.stopPropogation();
});

<table>
  **<tr>**
    <td>    
      <table id="myTable_1">
        **<tr>**
         <td>Test</td>
        **</tr>**
      </table>
    </td>
  **</tr>**
</table>

http://jsfiddle.net/6UmpY/97/

于 2015-06-26T12:53:00.913 に答える
0

$("tr").live('click',function() {}); が原因です。^^^^^ は html に 2 つのカウントがあります。.live () または .delegate() が 1 回実行されるようにするには、$(selector).delegate() のセレクターを $('td') または$('tr')

于 2014-04-11T05:41:26.147 に答える