This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have a jquery calendar wich it takes events from a php file wich is feeding json data.
I want to bind a function on every event added to calendar. And I did this:
$(this).bind("mouseenter", function(){
alert("a");
});
It works, but only on second rollover on each event. First time I roll over nothing happens.
There are a couple of ways you can achieve this using JQuery.
$(selector).live( evt, function(){} ); // for JQuery 1.7 and less.
$(document).on( evt, selector, function(){} );
Event Delegation is yet another way you can use to achieve this.
consider this link => http://learn.jquery.com/events/event-delegation/
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 6 years ago.
I have a file 'controlpanel.php' that uses jQuery and communicates to another php file through AJAX Get requests. That ajax request will result in a table with some buttons being displayed in controlpanel.php
$(document).ready() is only called once, and it is called before the table is loaded (from the AJAX request).
How can I use jQuery to watch mouse handlers for the newly loaded table (aka after $(document).ready() has been called?
Specifically, I am trying to do something like:
$('[id^=modify-btn]').click(
function () {
alert("modify-btn !!");
//and other fun stuff
}
);
AFTER the AJAX request goes through, but I am unsure as to how to enable this trigger.
Thank you for your time!
You can use on() for event binding on dynamically created elements (loaded content through AJAX).
$(document).on( eventName, selector, function(){} );
So you can implement it like this:
$(document).on('click', '[id^=modify-btn]',
function () {
alert("modify-btn !!");
//and other fun stuff
}
);
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:
Turning live() into on() in jQuery
(5 answers)
Closed 9 years ago.
My web framework automatically updated my jQuery script to the current last version, the 1.9.
Now all my:
$(".myclass").live("click", function() {...
don't work anymore. I mostly used it with some ajax called which filled html in my page.
I would know how to replace this functionnality in the last version. A friend told me to use "on" instead, but the "on" stays fixed on the same element.
Explanation, in this example (no ajax), I use a "+" icon, to display an "ul li list".
$(".closed").live('click', function(){
$("#ul_list_"+$(this).attr('id')).addClass("displayed").removeClass("hidden").show();
$(this).addClass("openned").removeClass('closed');
$(this).html('<i class="icon-minus"></i>');
});
$(".openned").live('click', function(){
$("#ul_list_"+$(this).attr('id')).addClass("hidden").removeClass("displayed").hide();
$(this).addClass("closed").removeClass('openned');
$(this).html('<i class="icon-plus"></i>');
});
(I know that the script is not the most optimized ever, but it worked. I used classes to open or close my lists. And if the visitor doesn't have JS enabled, nothing is hidden, all the folded lists are opened)
Notes:
I've tried https://github.com/jquery/jquery-migrate, but the only message that I have is "JQMIGRATE: jQuery.fn.live() is deprecated", not how to fix it.
The docs already provide an example:
Rewriting the .live() method in terms of its successors is
straightforward; these are templates for equivalent calls for all
three event attachment methods:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
So: $(document).on("click", ".closed", function() { ... }).
You need to use on with a delegated handler:
$('#parent').on('click', '.closed', function() {
// your code...
});
Note that you should replace #parent with the closest parent element to .closed which is available on page load - usually the element which .closed was appended to.
you have to use the on instead of live. because live is deprecated on the version 1.7