This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 8 years ago.
This is very common problem and i read a lot about this topic. But in my example, I came to the wall. And I ask you for help. How to bind functions using jQuery handler: .on();
$( "td" )
.on( "mouseenter", function() {
$( this ).css({
"background-color": "white"
});
Link to my example: http://jsfiddle.net/epredator/7Fz6X/
After click "Add person" button there append new row in my table. But this new element has no functionality like others. Hot to fix this, thanks for any hints!
The first selector needs to be something that already exists on the page, then you can delegate. For example:
$('body').on('mouseenter', 'td', function() {
Related
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');
}
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 binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have created a new html element, and inserted it onto a node. However it doesn't have any listeners registered on the class name 'edit-expense-category' because of this. My code for registering this class name on page load is as follows:
$(".edit-expense-category").click(function () {
// function related stuff
});
What I'd like to know is once I have another element created dynamically using the class name above, how do I register this element with a listener as well?
I was going to suggest you using jQuery's .live, but it turns out it is deprecated. However, the newer equivalent is .on. Use it like this:
$( document ).on( events, selector, data, handler );
// In your specific case it'll look like:
$( document ).on( "click", ".edit-expense-category", { }, function () {
// function related stuff
});
More about this here (don't forget to look into the newer equivalent of .on)
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