Question

以下のシナリオでは、提案が必要です。 私はアイテムのオブジェクトを持っており、次のように動的にHTMLオブジェクトを構築：

$.each(item,function(k, iteminner) { 
    html += '<td><div id="outerdiv">' + iteminner.Name + '</div>'; 
    html += '<div id="clickme"></div></td>'; 
}); 

tableは、各ボックスは、各tdに名前とボタンが含まれます。この形式で構築されています。ユーザーがセルのボタンをクリックすると、それぞれ名前を表示したいと思います。ここでは何が欠けていますか？そのIDを想定し

$('#clickme").click() { 
    alert($("#outerdiv").iteminner.name); 
} 

は、第二のdiv id="clickme" + 2がクリックされたときに、私は、第二のセル内の要素の存在へのアクセス方法、​​のように、divタグの両方のためのユニークなのですか？

Answer 1

まず、同じidの複数の要素をDOMに追加していますが、これは無効です。あなたはこのように、クラスを使用するようにHTMLを変更する必要があります（これらは動的にDOMがロードされた後に作成されているよう）あなたが.clickme要素に委任イベントハンドラを使用する必要があります。そこから

$.each(item, function(k, iteminner) { 
    html += '<td><div class="outerdiv">' + iteminner.Name + '</div><div class="clickme"></div></td>'; 
}); 

DOMを横断すると、彼らの兄弟を見つける.outerdiv。私は上記の主要セレクタとしてdocumentを使用

$(document).on('click', '.clickme', function() { 
    var name = $(this).siblings('.outerdiv').text(); 
    // do something with name here... 
}); 

注：これを試してみてください。理想的には、最も近い静的な親要素を使用する必要があります。html変数を追加するために使用するのと同じセレクタを使用することをお勧めします。

Answer 2

IDのはUNIQUE

// Use class instead 
$.each(item, function(k, iteminner) { 
    html += '<td><div class="outerdiv">' + iteminner.Name + '</div>'; 
    html += '<div class="clickme"></div></td>'; 
}); 


// You need to have event delegation here as a direct onclick wont be binded for the dynamically created .clickme 
$(document).on("click", ".clickme", function(){ 

    // You need to fetch the html of .outerdiv, so traverse to it first. 
    var _html = $(this).closest("td").find(".outerdiv").html(); 
    alert(_html); 

});