how to get event on dynamically added html button
Question
the program which i am posting in that i am using a add button to add more button. but when i click on the added button with value remove than no event occurs.
<?php
?>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.input').click(function()
{
$("p").prepend('<input type="button" id="hh" value="remmove" />');
});
$('#hh').on('click',function()
{
alert('raman');
});
});
</script>
</head>
<body>
<p>
<input type="button" class="input" value="add"/>
</p>
</body>
</html>
please let me know what is wrong with this code. when i click on the button with id 'hh' having value remmove than i am unable to get the result ie, alert.
5 answers
solution1
1 2013-07-27 07:27:08
You need to delegate event to parent for elements which are added dynamicallly.
$(document).on('click', '#hh',function()
{
alert('raman');
});
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
solution2
1 2013-07-27 07:27:20
You need to use event delegation here, but make sure that the id remains unique in the document.
$(document).on('click','#hh',function()
{
alert('raman');
})
If you are planning to add multiple buttons, then use a class instead of id
$(document).ready(function() {
$('.input').click(function() {
$("p").prepend('<input type="button" class="hh" value="remmove" />');
});
$(document).on('click', '.hh', function() {
alert('raman');
});
});
Demo: Fiddle
solution3
0 2013-07-27 07:27:05
The problem is that your element doesn't exist at the time you try to add a click handler to it. Just move your $('#hh').on('click'... within the anonymous function for $('.input').click .
$('.input').click(function()
{
$("p").prepend('<input type="button" id="hh" value="remmove" />');
$('#hh').on('click',function()
{
alert('raman');
});
});
solution4
0 2013-07-27 07:30:04
You can also use chaining method
$(document).ready(function() {
$('.input').click(function() {
$("p").prepend('<input type="button" id="hh" value="remmove" />').find("#hh").on('click',function() {
alert('raman');
});
});
});
solution5
0 2013-07-27 07:32:41
you should use this
$(document).ready(function () {
$('.input').click(function () {
$("p").prepend('<input type="button" id="hh" value="remmove" />');
});
$(document).on('click', "#hh", function () {
alert('raman');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.