Id base selector jquery click event not working in Single page application

Question

I am working with single page application, trying simple click event, its working with first screen but not working with second or third screen...

   $("#Signup").click(function() {
          alert("click success");
        $("#ButtonAction1").modal({
            show: true
     });

    });

Answer 1

You must not use the same ID for different elements in the same page, use classes instead.

Answer 2

Make sure your DOM is already fully loaded.

$(function() { 
  $("#Signup").click(function() {
    alert("click success");
    $("#ButtonAction1").modal({
        show: true
    });
 });
});

If you add an element after the click event handler has been added, the element won't inherit it.

Answer 3

Try using the on instead of the click since it works with dynamic elements and delegates the events.

You can check out the difference between the methods here Difference between .on('click') vs .click()

 $("#Signup").on('click',function() {
        alert("click success");
        $("#ButtonAction1").modal({
            show: true
         });
    });

Answer 4

It looks like you're buttons are dynamically loaded. You can use the following:

$('document').on('click', '#Signup', 
  function(){
    alert("click success");
    $("#ButtonAction1").modal({
      show: true
    });
  }
);

Source:

https://stackoverflow.com/a/16898442/6671505

$('#PARENT').on('click', '#DYNAMICALLY_ADDED_CHILD', function(){ CODE HERE });