future element doesn't get binded with on()? [duplicate] - javascript

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

Related

Events not reacting after jquery html injection [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I am injecting some html strings to create buttons, however they jquery events don't fire after they have been created. I was told they needed to be "initialized" but cannot find an example.
$('#parent_div).html(<div class="clickable-button">click me here</div>);
will create:
<div id='parent_div'>
<div class="clickable-button">click me here</div>
</div>
And my usual jquery doesn't fire when clicked.
$('.clickable-button').on('click', function (){
console.log('clicked');
}
I got it to work by using a parent that existed before the injection with on()
$('#parent_div').on('click', '.clickable-button', function(){
console.log('clicked');
}
But it seems like there should be a better way to handle this because I don't always know what the parent is and I don't want to hard code new jquery every time I inject something. How do people usually handle this problem?
You can listen at the document level in that case you dont know whats the parent element
$(document.body).on('click', '.clickable-button', function(){
console.log('clicked');
}

Jquery listener for change of element id [duplicate]

This question already has answers here:
Firing event on DOM attribute change
(6 answers)
Closed 8 years ago.
I am trying to set up a listener to fire when an elements id changes, I don't know if this is possible but here is my attempt (that isn't working).
$(".appSelect").on('change', function() {
//fire change event
});
maybe something like :
$(".appSelect").attr("id").on('change', function() {
Is this possible in jquery?
Thanks!
It's not possible with a listener because no event occurs. You'd have to periodically check the ID with a setInterval function or similar. Better, tie into the function that changes the ID with a callback.

Jquery click event after after creating div [duplicate]

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

how to change onmouseover attribute programmatic? [duplicate]

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');

Jquery doesn't bind to new appended elements [duplicate]

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

Categories