1

次のマークアップがあります (これは制御できないため、そのままにしておく必要がありますが、JavaScript は操作できます)。

http://jsbin.com/uyifu3/edit

私が達成しようとしているのは、テーブルの行をクリックすると、「Toggle Me Here」リンクが自動的にクリックされることです。

現在のセットアップでは、自分が再帰ループに陥っていることに気づき続けています。

したがって、表の行の任意の場所をクリックすると (リンク自体を実際にクリックすることを除いて)、赤いボックスがトグルされるリンクをクリックする必要があります。テーブルの行に関係なくリンクをクリックすると、「selectedRow」クリック イベントが発生することなく、通常どおり赤いボックスがトグルされます。

4

5 に答える 5

2

免責事項、以下の回答は最適な解決策ではありません。可能であれば、目立たないハンドラーを使用して@karimのソリューションを使用してください。

彼の解決策がオプションではない場合、たとえば、このリンクが何かによって自動生成されている場合は、次のようにすることができます。

$(function() {
  $('.selectedRow').click(function(e) {
    if(e.target.nodeName != 'A')
      $(this).find('td:last a').click();
  });
});

ここでテストできます。そもそもクリックがアンカーから発生したものではないことを確認するだけです。その場合、必要なことは完了しておりclick、行にバブリングするイベントは何のアクションも実行しません。

于 2010-07-19T23:40:18.597 に答える
1

何が起こっているか (私が思うに) は、アンカーをクリックするとイベントが発生し、行にバインドされたイベントがトリガーされます。次のようにアンカーにバインドすることをお勧めします。

  $('.toggleMe').click(function(e) {
      e.stopPropagation(); // prevent event from bubbling up the DOM tree
      $("#box").toggle();        
  });

また、アンカーからインライン関数呼び出しを削除し、クラス.toggleMeなどを指定します (上記のクリック ハンドラーで使用されます)。

<a class="toggleMe" href="#">Toggle Me Here</a>

ここで試してみてください: http://jsbin.com/uyifu3/7/edit (アンカーをクリックしてもクリックイベントはトリガーされません.selectedRow。これにアラートを追加しました)。

于 2010-07-19T23:23:18.107 に答える
0 
$('tr').click(function(){
    $('#box').toggle();
});

toggleMe()基本的にリンクをクリックすることは行をクリックすることと変わらないように、機能を削除するだけです。それはショーのためにそこにあるだけです:)

于 2010-07-19T23:29:08.893 に答える
0

共通の親 (この例では行/tr) にバックアウトしてから、ターゲット (onclick ハンドラーを持つ a) にドリルダウンしてみてください。

$(e.target).parents('tr').first().find('td:last a').click();
于 2010-07-19T23:32:52.253 に答える
0

複数の行があると仮定します（ のクラスを使用しているためTR）。このコードはあなたのために働くでしょう：

$(document).ready(function(){
  // Remove the anchors
  $(".selectedRow td:last a").each(function(){
    $(this).replaceWith($(this).html());
  });

  // Make entire row clickable
  $(".selectedRow").click(function(e){
    $('#box').toggle();
  });
});

基本的に、アンカーを削除し、toggleMe()行全体をクリック可能にします。

これが実際のコードです。

于 2010-07-19T23:39:52.550 に答える