1

やあ、

編集：あなたのほとんどが提案したように、私はで.on()はなく試し.live()てみましたが、それは役に立ちませんでした。この問題はajax呼び出しだけでなく、jqueryを使用して新しい要素を追加しようとしても、イベントは新しく作成された要素に登録されません。
以下のスクリプトを変更しました。
既存のテーブルでクリックイベントがトリガーされた場合、新しいテーブルを追加しています。クリックイベントは、最初のテーブルでは適切にトリガーされますが、スクリプトによって新しく追加された次のテーブルではトリガーされません。
問題はにあると思います.each()。この機能は、新しく追加された要素では機能しません。この問題を処理する方法はありますか？

ajaxイベントによってコンテンツが変更されるhtmlページがあります。ページに含まれるすべてのテーブルにクリックイベントを登録したいのですが、最初は正常に機能しますが、ajaxによってコンテンツが変更されると、イベントがトリガーされます
。HTML：

<head>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 </head>
<style>
 table{
  border-collapse:collapse;
 }
 table td{
  border:1px solid;
 }
</style>
 <body>
  <table clk="true">
   <thead>
        <tr>
         <td>S.No</td>
         <td>Name</td>
        </tr>
   </thead>
   <tbody>
     <tr><td>1</td> <td>Rama Rao</td></tr>
     <tr><td>2</td> <td>Tom Cruise</td></tr>
     <tr><td>3</td> <td>Tom Honks</td></tr>
     <tr><td>4</td> <td>Will Smith</td></tr>
   </tbody>
  </table>
 </body>

脚本：

$('table').each(function(){
    if($(this).attr('clk')=="true"){
       $(this).find('tbody tr td').live('click',function(){
         var str= $('table').html();
         str = '<table  clk="true">'+str+'</table>';
         $('table').after(str);
       });
     }
   });

注：テーブルに属性clk = "true"のみがある場合は、イベントを登録する必要があります。 「各」ループが必須であるかどうかを確認するには。

どんな助けでも大歓迎です。

4

7 に答える 7

2

on()の代わりに使用live()

このようなものが欲しいですか？

jsfiddle

于 2012-08-22T14:33:53.183 に答える
1

on動的にロードされる要素のイベントハンドラーをアタッチするときにこのメソッドを使用する必要があります。このliveメソッドは、最新バージョンのjQueryでは非推奨になっています（そうでない場合は、非推奨になります）。

例：

$(document).on('tbody td', 'click', function(){
    alert('hi');
});
于 2012-08-22T14:40:05.297 に答える
0

.liveで正しく動作しません.find。代わりにこれを試してください：

$('table[slk=true] tbody td').live('click',function(){
    alert("Hi");
})

またはさらに良い、

$('table[slk=true]').delegate('tbody td', 'click', function(){
    alert("Hi");
});

また、新しいテーブルも追加される場合は、この方法で行います。

$(document).delegate('table[slk=true] tbody td', 'click', function(){
    alert("Hi");
});
于 2012-08-22T14:35:34.837 に答える
0

私はあなたがこのようなものが欲しいと思います：

$("table[clk='true']").on("click", "tbody td", function(){
    alert("Hi.."); 
});
于 2012-08-22T14:36:03.800 に答える
0

jQueryバージョン1.7.1を使用しているようですが、liveメソッドは非推奨です。したがって、以下の方法を使用してください。それは動作します。

$('table').each(function(){
   if($(this).attr('clk')=="true"){
       var cells = $(this).find('td');
       $('body').on('click', cells, function(){
       alert('hi');
       });
   }
});

</ p>

于 2012-08-22T14:42:49.157 に答える
0

成功コールバック内にコードを配置する必要があると思います。$.ajax()

$.ajax({
    url: 'page.html',
    success: function(data) {
        $('table[clk=true] tbody tr td').on('click', function() {
            alert("Hi..");
        });
    }
});
于 2012-08-22T14:48:59.470 に答える
0

ajaxによって変更された要素の親コンテナにdelegate-eventをアタッチする必要があります。元。テーブル全体をajaxセットする場合は、イベントを本体にアタッチする必要があります。

$('body').on('click', 'td', function(){ 
    // your function here
});

ajaxによってリロードされた要素にdelegate-eventをアタッチすると、機能しなくなります。

于 2013-03-06T00:47:22.093 に答える