2

アクションを実行するクリックイベントがテーブル行にあります。ただし、同じ行のボタンをクリックした場合、on-row-clickイベントを防止し、ボタンの機能を実行したいのですが、これを実現する方法がわかりません。

これを示すために、->フィドル<-を作成しました。テーブルの行をクリックするだけで、ボタンが表示されます。次に、ボタンをクリックします。ボタンをクリックしている間、row-click-eventが再度実行されたことがわかります。これを防ぐにはどうすればよいですか？

 <table id="tab_open_deals" class="table table-condensed table-striped cb_table-hover">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody id="search_result">
    <tr>
      <td><a class="btn my_btn hidden2" href="#">Button</a></td>
      <td>39.90</td>
      <td>29 Dec 2012</td>
    </tr>
  <tr>
    <td><a class="btn my_btn hidden2" href="#">Button</a></td>
    <td>1499.00</td>
    <td>8 Jan 2013</td>
  </tr>
 </tbody>
</table>

CSS：

.hidden2{
    display: none;
}

jquery：

$(document).ready(function() {
    $('#tab_open_deals tbody tr').off('click').on('click', function() {
        var row = $('<tr/>');
        row.load('/echo/html/', {
            html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
        });

        row.insertAfter($(this));
      $(this).find(".my_btn").off('click').on('click', function(){ alert("clicked") })
        $(this).find(".my_btn").show();
    });
});
4

3 に答える 3

5

これを使用して、伝播イベントを停止します

       event.stopPropagation();

ここのリンクを参照してください

于 2013-01-05T12:05:28.773 に答える
2

にを追加するだけreturn false;ですclick

$(this).find(".my_btn").off('click').on('click', function () {
  alert("clicked");
  return false;
})

http://jsfiddle.net/VhYdD/4/

于 2013-01-05T12:05:20.877 に答える
0

そのボタンが存在するTRからクリック動作を削除する必要があります。$(this).closest('tr')ボタンからDOMを検索してTRを見つけることができるように、jQueryメソッドを使用できます。または、jQueryの親関数を使用して親を見つけることもできます。探している要素（TR）が見つかったら、unbindそこからクリック機能を実行できます。

したがって、最終的な呼び出しは次のようになります。

$(this).closest('tr').unbind('click');

これをコードに挿入しましたが、期待どおりに機能し、TRからクリックイベントを削除しました

$(document).ready(function() {
    $('#tab_open_deals tbody tr').on('click', function() {
        var row = $('<tr/>');
        row.load('/echo/html/', {
        html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
    });
  $(this).find(".my_btn").on('click', function(){
       $(this).closest('tr').unbind('click');
       alert("clicked") })
       $(this).find(".my_btn").show();
       row.insertAfter($(this));
    });
});

これがあなたにとってうまくいくことを願っています。

于 2013-01-05T12:21:16.450 に答える