jquery .on() method with selector not working for dynamic button

Question

I have some code where I add a button dynamically to the page.

<a href=“#1" class="btn btn-default next">Next</a>

I am using the .on() method with the selector parameter but nothing is happening when I click the button. I saw that other people had a similar problem for dynamically added elements but they were missing the selector and adding it solved it.

$(".next").on("click", ".next", function() {

    alert(“next page");

});

I've put the button in the main body of my page when it loads and it works fine. It just doesn't work when it gets added to the page later.

Answer 1

Change

$(".next").on("click", ".next", function() {

to

$(document).on("click", ".next", function() {

Since you are dynamically creating the elements, using document will delegate the events on to the children elements so this helps to bubble up events on document level.

Answer 2

Let us suppose that ancestor is the selector of an ancestor of the button in your html. Then:

$(ancestor).on("click", ".next", function() {
    alert("I have clicked on the button");
});

This works even if your button does not exist when this part runs. If you have nothing more specific for ancestor, then you can use "body".

Answer 3

Try this

You can use document or body

$(document).on("click",".next", function() {
alert('button clicked');
});

Answer 4

use can use onClick property of html

function myFunction()
{
    alert("hello");
}

<button onclick="myFunction()">Click me</button>