1

表にデータを表示する概要ページがあります。ユーザーが行をクリックすると、ポップアップが開きます。しかし、ポップアップはハングするまで何度もリロードされます。

概要コード:

<tbody>
    <tr>
       <td>
          <a href="/pop-up/details/1/" onClick="MyWindow=window.open('/details_screen/1/','window1','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=800,height=600'); return false;">details screen for 1</a>
       </td>
    </tr>
    <tr>
       <td>
          <a href="/pop-up/details/2/" onClick="MyWindow=window.open('/details_screen/2/','window2','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=800,height=600'); return false;">details screen for 2</a>
       </td>
    </tr>
</tbody>

行をクリック可能にするJavaScript：

function make_rows_clickable(table){
    $(table).find('tbody tr').each(function() {
                $(this).hover(function(){
                    //rollover
                    $(this).addClass('hover');
                },
                function() {
                    //rolloff
                    $(this).removeClass('hover');
                }).click(function() {
                    $(this).find('a').click();
                });
    });
}

解決

回答のコメントにあるように、アンカー クリックは tr クリック イベントをトリガーし、無限ループを作成します。onClick イベントを削除して属性を追加することで解決しました。tr クリック イベントが開き、ポップアップが表示されます。

<td>
    <a href="/pop-up/details/2/"element_id="2" pop_w="800" pop_h="600">details screen for 2</a>
</td>

J:

$(table).find('tbody tr').hover(function(){
                    //rollover
                    $(this).addClass('hover');
                },
                function() {
                    //rolloff
                    $(this).removeClass('hover');
                }).click(function(e) {
                    e.stopPropagation();
                    var anchor = $(this).find('a');

                    var el_id = $(anchor).attr('element_id');
                    var pop_w = $(anchor).attr('pop_w');
                    var pop_h = $(anchor).attr('pop_h');

                    MyWindow=window.open('/details/screen/' + el_id + '/', el_id, 'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=' + pop_w + ',height=' + pop_h);
});
4

1 に答える 1

2

したがって、各テーブル行には複数の td が必要です。したがって、実行すると

$(this).find('a').click();

a行内のすべてのタグ (td の数に等しい) を検索し、それらのクリック機能を実行します。このため、複数のポップアップが開きます

コードを次のように置き換えます。

$(this).find('a:first').click();

または使用：

$(table).find('tbody tr').click(function() {
   MyWindow = window.open('/details_screen/2/', 'window2', 'toolbar=no, location=no, directories=no, status=yes, menubar=no, scrollbars=yes, resizable=yes, width=800, height=600');
   return false;
})
于 2011-07-21T09:00:44.067 に答える