javascript - 即使我使用 "on"，点击也不会触发

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

Why does jQuery or a DOM method such as getElementById not find the element? (7 个回答)

已关闭 7 年前。

我有以下代码:

  if(amStatus === "Logout") {
    $('#row-qfauto-1 .large-9').append('<a id="next-password" class="button button-next" href="javascript:;">Next</a>')
    $('#next-password').click(function() {
      $('#row-html2-0').addClass('next-visible')
      $(window).resize()
    })
  }

  $('.button-next').on('click', function() {
    $(this).hide()
    $(window).resize()
  })

如您所见 button-next使用 jQuery 动态添加。因此，为了使按钮在单击时消失，我决定使用 on .

但是，该按钮并没有消失。它就留在那里。当我这样做时

  $('.button-next').click(function() {
    $(this).hide()
    $(window).resize()   
  })

在控制台中输入两次，然后按钮消失。诡异的。可能是什么问题？

实时站点:http://www.chineselearnonline.com/amember/signup/cloprogressive

Answer 1

试试这个:

if (amStatus === "Logout") {
  $('#row-qfauto-1 .large-9').append('<a id="next-password" class="button button-next" href="javascript:;">Next</a>')
  $('#next-password').click(function() {
    $('#row-html2-0').addClass('next-visible')
    $(window).resize()
  })
}

$('#row-qfauto-1 .large-9').on('click', '.button-next', function(e) {
  e.preventDefault();
  $(this).hide()
  $(window).resize()
});

Note: You are assigning event listener to #next-password as well as .button-next, is this the way you want to implement ?

Also make sure you dont have redundant id in your DOM