Jquery click event not firing on the element created dynamically using jquery
Use even delegation instead
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all children matching a selector,
whether those children exist now or are added in the future.
More info
$(document).on('click', '.remove', function () {.....
Click event doesn't work on dynamically generated elements
The click()
binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on()
.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
Source
Here's what you're looking for:
var counter = 0;
$("button").click(function() { $("h2").append("<p class='test'>click me " + (++counter) + "</p>")});
// With on():
$("h2").on("click", "p.test", function(){ alert($(this).text());});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><h2></h2><button>generate new element</button>
jQuery click not working for dynamically created items
Do this:
$( '#wrapper' ).on( 'click', 'a', function () { ... })
$( 'body' ).on( 'click', '.your_dynamic_elem_css_selector', function () { ... }) # use body as wrapper static elem
where #wrapper
is a static element in which you add the dynamic links.
So, you have a wrapper which is hard-coded into the HTML source code:
<div id="wrapper"></div>
and you fill it with dynamic content. The idea is to delegate the events to that wrapper, instead of binding handlers directly on the dynamic elements.
Btw, I recommend Backbone.js - it gives structure to this process:
var YourThing = Backbone.View.extend({
// the static wrapper (the root for event delegation)
el: $( '#wrapper' ),
// event bindings are defined here
events: {
'click a': 'anchorClicked'
},
// your DOM event handlers
anchorClicked: function () {
// handle click event
}
});
new YourThing; // initializing your thing
Jquery click function is not working for dynamic elements
The click()
function you can call on the elements which have direct binding. Direct binding will only attach event handler which are present at the time of DOM loading i.e. static elements.
If there are elements created after DOM is loaded, then not all the events associated with them would be triggered if you have not attached the event handlers correctly.
And when you create dynamic elements that means they are being created after DOM is loaded and they were not present at the time of direct binding, so you can not call directly click()
on that.
if you want to get click
functionality on dynamic created elements, you'll have create a delegated binding by using on. This you can achieve by adding a .on
handler to a static parent element.
Delegated events have the advantage that they can process events from descendant elements that
are added to the document at a later time.
Change this line
$("#questlist_item_button_reward" + obj.questid).click(function() {
alert("reward");
});
to
$("#call_questitem").on("click", "#questlist_item_button_reward" + obj.questid, function() {
alert("reward");
});
And do the same for the go
button as well.
DEMO
jquery - Click event not working for dynamically created button
You create buttons dynamically because of that you need to call them with .live()
method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
For Example
If your html is something like this
<div id="btn-list">
<div class="btn12">MyButton</div>
</div>
You can write your jquery like this
$(document).on('click', '#btn-list .btn12', function(){
// Your Code
});
jQuery onClick not working on dynamically added elements
You need to event Delegation on your dynamically added element so that a click event can be listened.
Since the element added after the
DOM
is ready are not part ofDOM
we need to useevent Delegation
so that a click event can be triggered from those elements.
Demo:
$(document).ready(function() {
//display pic real time and add new upload button
$(document).on("change", "input[type='file']", function(e) {
if (e.target.files[0] != null) {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#miniImgHolder").after("<div class='col-1 miniImg'><img class='img-fluid' src='" + e.target.result + "'></div>"); //.miniImg on click not works if it set from here
}
reader.readAsDataURL(this.files[0]);
}
}
});
//click not working for bellow code
$(document).on("click", '.miniImg', function() {
console.log("i am not working on newly added miniImg");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-1" id="miniImgHolder">
<input type="file" name="my_file[]" class="custom-file-input custom-file-label theFiles" style="cursor:pointer;">
</div>
<div class="col-1 miniImg">
<img class="img-fluid" style="width:75px; height:75px;" src="~/Images/img1.png">
<!--this .miniImg on click works fine-->
</div>
<div class="col-1 miniImg">
<img class="img-fluid" style="width:75px; height:75px;" src="~/Images/img2.png">
<!--this .miniImg on click works fine-->
</div>
On click event not firing the first time on dynamically added elements via AJAX
It was a custom validation rule on the input field that messed up everything.
After fixing that rule, it now works as expected.
dynamically created li click event not working jquery
Just put your code inside ready function and it will work with your second attempt that using event delegation on(), check snippet bellow.
Hope this helps.
Snippet
$(function(){ var groups = ['test-1','test-2','test-3']; var len = groups.length; for (var i = 0; i < len; i++) { var id = groups[i].split("-")[0]; var name = groups[i].split("-")[1]; $('#listbox-groups').append('<li id="' + id + '" class="listbox-li"><a href="#" class="listbox-li-a" style="text-decoration: none">' + name + '</a></li>'); }
$(document).on("click", "#listbox-groups li", function(event) { alert($(this).text()+" clicked"); });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul id="listbox-groups"></ul>
Related Topics
Remove Specific HTML Tag with Its Content from JavaScript String
Get the Height of an Element Minus Padding, Margin, Border Widths
How to Get the Opacity of an Element Using JavaScript
How to Detect MAC Os Inverted Color Mode in JavaScript/Css
How to Open Bootstrap Modal in Ajax Success
Firefox Not Able to Enumerate Document.Stylesheets[].Cssrules[]
Change the :Before Selector from JavaScript
Implementing Flipcard on Click Instead of on Hover
Running JavaScript in New Window.Open
React-Leaflet Map Not Correctly Displayed
How to Get the Font Size of an Element as It Was Set by CSS
Render Closing Tag Conditionally in Order to Emulate Calendar Behavior
How to Make Twitter Bootstrap Submenu to Open on the Left Side
How to Get Screen Position of CSS3-3D Transformed Elements
Why Are CSS Keyframe Animations Broken in Vue Components with Scoped Styling