jQuery：获取html元素的ID：为什么一种解决方案有效而另一种不起作用

Question

I am referencing one element on an index page hidden initially and then showed with jquery on an index.html page. Can't explain why the first ones doesn't work, even if it should, but the last one does. I am getting the id of a pressed button "id='edit1'...2...3..etc" Thank you!

//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:

The containers are hidden and shown using this function:

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

So the div container, I am trying to reference by id was hidden after the page was loaded or maybe before the page is loaded. My guess is after the page is loaded...

The HTML:

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

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

</div>

It is added/injected after the page was loaded with this js script, but still what has the last method special, just referencing through the document down to the id attribute of the button:

  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

It's hard to tell, since you've only shared your jQuery. Update with your HTML please.

If you are referencing an element which was added to the DOM after the initial page load, .click will not work, because it only looks for elements initially loaded into the DOM. Instead, you would use the .on method, which looks for elements added to the DOM both before and after initial load.

UPDATE:

I should have looked closer. The second snippet of code that didn't work, but used the .on method, most likely didn't work because you are still trying to access the .edit-btn element, which at this point I'm assuming was added after page load. The code snippet that does work, is accessing the body element first. I will try to find and update with a better explanation, but the .on method still needs to find a element that existed in the DOM initially. From there, it can climb down the tree to find .edit-btn element.