2

次の HTML 要素があります。

<div id="divOrderContainer">
 <ul id="ulOrders">
<li id="liAck">
  <div id="divViewOrderTitle"></div>
  <div id="divViewOrderSpacer"></div>
  <div id="divAcknowledgeItems"></div>              
</li>
<li id="liTemp">
  <div id="divViewOrderTitle">test</div>
  <div id="divViewOrderSpacer"></div>
  <div id="divTempItems"></div>
</li>
 </ul>          
</div>

ページの準備ができたら、ajax リクエストを実行し、応答時に次のように既存の DOM ツリーに挿入します。

htmlBuilder_Temp = htmlBuilder_Temp + '<li><table id="tableTemp">' +
 '<tr>' +
'<th>Ia</th>' +
'<th>Den</th>' +
'<th>Unt</th>' +
'<th>Ory</th>' +
'<th></th>' +
 '</tr>';               
htmlBuilder_Temp = htmlBuilder_Temp + 
 '<tr>' +
'<td> a </td>' +
'<td ""> +b+ </td>' +
'<td> +c+ </td>' +
'<td> +d+ </td>' +
'<td><span id="span'+posid+'">delete<span></td>' +
 '</tr>';           
htmlBuilder_Ack = htmlBuilder_Ack + '</table></li>';

新しい要素の追加は「常に」成功し、

ここに私の問題があります。下のすべてのスパンにクリックハンドラーをアタッチしたかったのです

Table>tr>td>span,

クリックすると要素IDが通知されますが、クリックハンドラーがアタッチされているかどうかを確認しようとすると、何もありませんでした。

クリック ハンドラー コード:

$("#divTempItem > table > tbody > tr").('click', 'td span', function(){
   alert($(this).attr("id");
});

私も試しました。

$("#tableTemp").on('click', 'tr td span', function(){
   alert($(this).attr("id");
});

しかし、無駄に、探している特定のDOM要素に到達できないようです...名前「スパン」+番号にアクセスしても問題は解決しません。

私は何かが欠けていますか？

出力 DOM ツリーのビューを次に示します。末尾の終了タグを削除しましたが、これで十分だと思います...

<div id="divOrderContainer">
   <ul id="ulOrders">
      <li id="liAck"></li>
      <li id="liTemp">
          <div id="divViewOrderTitle">test</div>
          <div id="divViewOrderSpacer"></div>
          <div id="divTempItems">
            <li>
               <table id="tableTemp">
                  <tbody>
                     <tr>                         
                       <td> a </td>
                       <td> b </td>
                       <td> c </td>
                       <td> d </td>
                       <td><span id="span8">delete</span></td>
                     </tr>                         
                   </tbody>
                </table>

とにかく、「TBODY」要素を自動的に作成したのは誰ですか?

ありがとう..

4

2 に答える 2

2

問題の説明から、Ajaxの部分から、イベントがバインドされている時点でテーブルがDOMに存在しないようです。代わりにli、DOMに存在する要素にバインドすることをお勧めします。 DOMReady：

$('#divTempItems li').on('click', 'td', function(e){
    alert(this.id);
});

HTMLは無効であることに注意してください（後者のコードブロックに貼り付けられているため）。aまたは要素にliのみ表示される必要があり、要素をaまたはの直接の子にすることはできません。また、重複するsは無効であり、ドキュメント内で一意である必要があります。uloldivulolidid

はtbody、テーブル要素をレンダリングするときに、すべてではないにしてもほとんどのブラウザによって自動的に作成されます。私が覚えているように、仕様はそれらがオプションであると言っていますが、ブラウザは、そうではないようです。

于 2012-08-02T07:08:28.050 に答える
0

この行を変更できるかもしれません：

'<td><span id="span'+posid+'">delete<span></td>' +

に

'<td><span id="span'+posid+'" onclick='+'"delete(this)">delete<span></td>' +

そして関数は

function delete(obj){
   alert($(obj).arrt('id'));
}
于 2012-08-08T10:49:03.147 に答える