How can I add an onclick event to a newly created button in JS or Jquery?

94 Views Asked by Nik N At 04 April 2025 at 19:39

I created a button with id through function .append(). Now I don't know to add any onclick event to it using its id. Here's what I have.

<html>
<body>
<div id="indiv"></div>
<script>
$('#indiv').append('<button id="btn1">press</button>'); 
$('#btn1').on('click', function(){
  alert('Hi!');
});
</script>

Original Q&A

There are 3 best solutions below

norcal johnny On 09 October 2020 at 07:25

This works fine.

$('#indiv').append('<button id="btn1">press</button>'); 
$('#btn1').on('click', function(){
  alert('Hi!');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div id="indiv"></div>
</body>
</html>

Mukesh Yadav On 09 October 2020 at 07:28

TRY this

$(document).on('click','#btn1',function(){
 alert('Hi!'); 
});

Toolbox On 09 October 2020 at 08:37

This is how you would solve it with plain vanilla JS (Since your question covers both Jquery and JS):

function myscript() {
document.write("My printout");
}

<html>
  <body>
    <div id="indiv">
      <button onclick="myscript()">My Button</button>
    </div>
  </body>
</html>

How can I add an onclick event to a newly created button in JS or Jquery?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in APPEND

Related Questions in CREATEELEMENT

Trending Questions

Popular # Hahtags

Popular Questions