Any jQuery help would be appreciated. I have two objects (identical) created with jquery. One loads when document opens (append to body tag) and the other appends to body tag as well within a button click event. When I click on the first it fires an alert message but second one doesn't ( would like it to fire as well). I have included the JSFiddle link with my code.
My Code:
<label for="" id="Label01" style="position:absolute;left:10px;top:15px;width:186px;height:23px;line-height:23px;z-index:8;">Button Created</label>
<label for="" id="Label02" style="position:absolute;left:190px;top:15px;width:186px;height:23px;line-height:23px;z-index:8;">Without Button</label>
<label for="" id="Label03" style="position:absolute;left:30px;top:115px;width:150px;height:18px;line-height:18px;z-index:1;">Click on a image</label>
<input type="submit" id="Button1" value="Create Image" style="position:absolute;left:495px;top:100px;width:106px;height:35px;z-index:0;">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
var $i1;
var $circle;
var dot = "dot1";
var dot_btn = "dot2";
// next (3) lines will create circle image and append to body WITHOUT button
click event
$i1 =$('<i/>').attr({ class: "far fa-dot-circle fa-2x" });
$circle = $('<div/>').attr({ id: dot
}).css({"position":"absolute","left":"200px","top":"40px"}).append($i1);
$("body").append($circle);
// button click to create another circle image
$("#Button1").click(function() { // click event - triggers a
alert("btn clicked");
var btnCircle;
$i1 =$('<i/>').attr({ class: "far fa-dot-circle fa-2x" });
btnCircle = $('<div>').attr({ id: dot_btn
}).css({"position":"absolute","left":"10px","top":"40px"}).append($i1);
$('#dot2').bind('click', function() { });
$("body").append(btnCircle);
});
// NOTE only "dot1" works (without creation using the button click jquery
code)
$("#dot1").on("click",function() {
alert("dot1 clicked");
});
$("#dot2").on("click",function() {
alert("dot2 clicked");
});
</script>
Here is jsfiddle link:
https://jsfiddle.net/jgwilly54/q13aLko8/1/
Thank you in advance for your assistance.
Change the code from
$("#dot2").on("click",function() {
alert("dot2 clicked");
});
To
$(document).on("click", "#dot2" ,function() {
alert("dot2 clicked");
});
Ref: Event Delegation
I think you'd be better off cloning your object - this replicates the entire thing, including any events and/or data you want to bring along.
Just did this on your fiddle, it works.
$("#Button1").click(function() {
$newObject = $( $firstObject ).clone().css( 'left', '10px' ).appendTo( 'body' );
$( $newObject ).click( function() {
alert( 'hey there!' );
});
});
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.