Jquery：html要素のIDの取得：なぜ1つのソリューションが機能し、もう1つのソリューションが機能しないのですか

Question

最初に非表示のインデックスページで1つの要素を参照していて、index.htmlページでjqueryで示しました。最初のものがうまくいかなかった理由を説明することはできませんが、最後のものはしません。私は押されたボタンのIDを取得しています "id = 'edit1' ... 2 ... 3..etc"ありがとう！

//why this doesn't work and the next one does??? 
/*$('.edit-btn').click(function(){ 
var id = $(this).attr('id'); 
console.log("btn1:", id); 
}); 

$('.edit-btn').on('click', function(){ 
var id = $(this).attr('id'); 
console.log("btn1:", id); 
}); 
*/ 

var id; 
$("body").on("click",".edit-btn",function(){ 
id = (this.id).replace("edit",""); 

UPDATE：

コンテナがこの機能を使用して非表示と表示されます：だからのdivコンテナ、私はページがロードされた後に隠されたIDによって参照しようとしています

function hideWindowsAndShowOneWindow(sWindowId) { 
$('.wdw').hide(); //fadeout 500 
$('#' + sWindowId).show(); // fade in 500 
} 

をかおそらくページが読み込まれる前に。ページがロードされた後、私の推測では...ある

HTML：

それが追加された

<div class="wdw" id="wdw-events"> 

<h4>Events text</h4></br> 
    <div id="content"></div> 
    <h4>Edit Events</h4></br> 
    <div> 

</div> 

/ページは、このスクリプトをJS、それでもただ、特別な最後の方法を持っているものを装填した後に注入ドキュメントのボタンのid属性までを参照します。

finalEventsLS.forEach(function (item) { 
    var date = item.date.day + "/" +item.date.month + "/" + item.date.year; 
    $('#content').append("<ul><li>" + 
     "Event nr.: " + item.id + " " + 
     "Name: " + item.name + " " + 
     "Topic: "+ item.topic + " " + 
     "Speaker: "+ item.speaker + " " + 
     "Date: " + date + "&emsp;" + 
     "</li><button class='edit-btn' id='edit" + item.id + "'>Edit</button> 
    </ul>"); 

    }) 

Answer 1

jQueryを共有しているだけなので、わかりにくいです。あなたのHTMLで更新してください。

最初のページの読み込み後にDOMに追加された要素を参照している場合、最初にDOMに読み込まれた要素のみを検索するため、.clickは機能しません。代わりに、.onメソッドを使用します。このメソッドは、初期ロードの前後にDOMに追加された要素を探します。

UPDATE：

私は近い見ているは​​ずです。 2番目のコードスニペットは機能しませんでしたが、.onメソッドを使用しましたが、まだ.edit-btn要素にアクセスしようとしているため動作しませんでした。この時点で、ページロード後に追加されたと仮定しています。機能するコードスニペットは、最初にbody要素にアクセスしています。私はより良い説明を見つけて更新しようとしますが、.onメソッドは、最初にDOMに存在していた要素を最初に見つけ出す必要があります。そこから、木を下って.edit-btn要素を見つけることができます。