1

次の表の最後のセルにリンクがあります。テーブルには、ユーザーの入力に応じて、ajaxを介してデータが入力されます。

<table class="table-list">
<tbody>
<tr>
 <td>...</td>
 <td><a href="/link">Link</a></td>
</tr>
</tbody>
</table>

行全体をクリック可能にするのが好きなので、次のスクリプトを使用してonClickイベントをキャッチします。ただし、リンクはテーブル行にもあり、スクリプトが「stackoverflow」エラーで中止されるまで、onClick-Eventは無限に発生します。

<script>
$(function() {
 $('.table-list tr').live('click', function() {
  $('a:last', this).click();
 });
});
</script>

以下のように一時的にイベントを無効にしようとしましたが、機能しません。

<script>
$(function() {
 $('.table-list tr').live('click', function() {
  $(this).off('click');
  $('a:last', this).click();
  $(this).on('click');
 });
});
</script>

また、addindや行isClickedへのクラスの削除など、いくつかのバリエーションを試しましたが、何も機能しませんでした。

これに関する提案はありますか？

4

3 に答える 3

3

バブリングなどのイベントの伝播を防ぐことが重要です。

ここにサンプルコードを投稿しました：http://pastebin.com/d25QeVkK

これは JS/jQuery の部分です。

(function($){
    $(document).delegate('table tr', 'click', function(e){
        $('a', this).trigger('click');
    });
    $(document).delegate('tr a', 'click', function(e){
        console.log("it works!");
        // use either of these to prevent stackoverflow
        //e.stopPropagation(); // use this if you want normal click behaviour without bubbling
        return false; // use this if you don't want normal click behaviour and no propagation
    });                            
})(jQuery);

したがって、デリゲートの動作方法が原因で実際​​には機能しないため、これは最も賢明なソリューションではありませんでした。デリゲートを使用する場合、クリックは body 要素にバブルする必要があり、stopPropagate はそれを防ぎます。これでうまくいくはずです：

$('body').delegate('.table-list tr', 'click', function(e){
        $('a', this).trigger('click');
});
$('body').delegate('.table-list tr a', 'click', function(e){
        e.stopPropagation();
        window.location.href = $(this).attr('href');   
});

e.stopPropagation();そうしないと、ターゲット URL にリダイレクトされる前に、しばらくすると UI がフリーズし、再帰の警告が表示されるためです。

http://pastebin.com/PrH96GX8

したがって、これはさらに短く、動作するはずです:

$('body').delegate('.table-list tr', 'click', function(e){
    window.location.href = $(this).find('a').attr('href');  
});

これを使用して、新しいタブで開きます。

$('body').delegate('.table-list tr', 'click', function(e){
    window.open($(this).find('a').attr('href'),'_newtab');
    return false;
});

正しいセレクターを使用するように注意してください。これは本当に一般的なコードです。

于 2012-11-26T14:37:40.123 に答える
0

これを試してください：

$(function() {  
  $('.table-list').on('click', 'tr', function(){
    $(this).find('a:last').trigger('click'); 
  });

  $('.table-list').on('click','a',function(e){ 
   e.stopImmediatePropagation(); 
  }); 
});
于 2012-09-27T10:44:30.337 に答える
0

リンクをクリックする代わりに、次のことを試してください。

<table class="table-list">
<tbody>
<tr style='border: 1px solid black;'>
 <td>.1.</td><td>.2.</td><td>.3.</td><td>.4.</td><td>.5.</td>
 <td class='link'><a href="/link" target="_blank">Link</a></td>
</tr>
<tr style='border: 1px solid black;'>
 <td>.1.</td><td>.2.</td><td>.3.</td><td>.4.</td><td>.5.</td>
 <td class='link'><a href="/link">Link2</a></td>
</tr>
</tbody>
</table>​

脚本：

  $('.table-list td').each(function(){
        if ($(this).find('a').length === 0){
            $(this).on('click', function(){
                var link = $(this).siblings('.link').find('a');
                if (link.attr('target') === '_blank'){
                    window.open(link.attr('href'));
                }
                else {
                    window.location = link.attr('href')            
                }
            });
        }
    });

それは醜く、短くすることができますが、フォーム送信IMHOよりはましです。
他の tds をクリック可能にしたい場合は、行全体をリンクでラップすることを検討してください。

于 2012-09-27T15:16:36.840 に答える