This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I am having a strange issue.
I have created a code snippet where the user can create dynamic input elements and remove them as well
When I click the remove class then it's not triggering the onclick event.
<input type='button' value='Add Button' id='addButton'>
<div id="TextBoxesGroup"></div>
I have created a jsFiddle
http://jsfiddle.net/squidraj/b4Cs8/2/
Use event delegation in jquery
$(document).on("click" , "a.removeField", function (event) {
event.preventDefault();
$(this).parent().remove();
counter--;
});
Fiddle
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a multiple checkboxs loaded from another file by ajax with class 'chk-bx'
<script>
$('.chk-bx').on( "click", function(){
alert("checked");
});
</script>
There are some checkboxes that are there beore loading ajax then its working fine. but after loading its not working.
Thanks you verymuch
The event handler is initialized before the checkboxes get to the DOM. You have to initialize the handler on the new checkboxes after they appeared in the DOM.
Edit: As Rory said, you can use a delegated event handler. You can attach the handler to a common parent of your checkboxes, like $( "#checkbox-container" ).on( "click", ".chk-bx", function() {...}). That way the newly added checkboxes in the #checkbox-container element will have that listener ran on a click event. You can read more about it here: https://learn.jquery.com/events/event-delegation/
This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 7 years ago.
$(".closeBtn").on('click',function(){
alert('');
});
+function myfunction(){
$(".elem").on('click',function(){
$("#someId").html('<img class="closeBtn" src=""/>'
);
});
}();
I used html to add some element into somewhere, I checked my dom and things are there. When I click the binded element closeBtn, it doesn't have respond. I thought using on() will work? or it's closure problem?
You need to use:
$("body").on('click','.closeBtn',function(){
alert('test');
});
Check Syntax For event delegation using on
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
hello people here is my ajax output...
$(function(){
//after ajax request
success:function(data){
$('#inbox').html('<div class="inbox_user" id='+data+'>'+data+'</div><br>')
}
})
Div is creating successfully,so Iam very sure no issues with ajax code....but now i have to give click event to class .inbox_user ,,,its not working with no error message on console... click event for #inbox works fine..... any idea to fix this??
i am trying in normal way $('.inbox_user').click(function(){})
try this :-
$(document).on('click', '.inbox_user',function(){
alert(1);
});
Demo
This question already has answers here:
How do you override inline onclick event?
(4 answers)
Closed 8 years ago.
my html code is here.
mouse event functions writing like this
<li class="gnb1" onmouseover="fn1('param_01');" onmouseout="fn2('param_02','param_01');" > ...
I want change function and parameters programmatical as jquery or javascript.
$("li.gnb1").attr("onmouseover", "new_function_name()");
this code is not working. help me. show your move!
You can unbind the old handler and add a new one.
// To remove
$( "#foo").unbind( "click" );
// Then add new binding
$( "#foo").click(function () { });
Documentation for unbind is here: http://api.jquery.com/unbind/
[Edit as per comment]
If you have the ability to change the HTML, you could use jQuery to perform your bindings as well as your unbindings.
[Further edit]
You can however remove an inline event handler with removeAttr
$('#foo').removeAttr('onclick');
This question already has answers here:
jQuery how to bind onclick event to dynamically added HTML element [duplicate]
(9 answers)
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 9 years ago.
I find out that by default JQuery doens't bind the new inserted elements.
Here is a snippet which shows what I'm trying to explain.
http://jsfiddle.net/8hf5r/2/
$('#chg-em').on('click', function(e) {
$('.local').empty().append('<p id="orange-juice">orange juice<p>');
e.preventDefault();
});
$("#orange-juice").on('click', function() {
alert('ola');
});
Which might be the solution? :(
Thanks.
Use delegated events :
$(".local").on('click', '#orange-juice', function() {
alert('ola');
});
Learn about delegated event here : http://api.jquery.com/on/#direct-and-delegated-events