Click even not triggering even though I'm using "on"

Question

I have the following code:

  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()
  })

As you can see button-next is being added dynamically with jQuery. So in order to make the button disappear when clicked I decided to use on.

However, the button doesn't disappear. It just stays there. When I do

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

twice in the console, then the button disappears. Weird. What could be the problem?

Live site: http://www.chineselearnonline.com/amember/signup/cloprogressive

Answer 1

Try this:

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

Answer 2

Try event delegation

$(document).on("click", ".button-next", function() {
  // do stuff
})

or attaching click event when element created using jQuery()

   $("#row-qfauto-1 .large-9")
   .append($("<a></a>", {
       "id":"next-password",
       "class":"button button-next",
       "href":"javascript:;"
       "on": {
            "click": function() {
                       $(this).hide()
                       $(window).resize()
                     }
       },
       "html":"Next"  
    }))