I'am trying to migrate from jquery 1.7 to 1.10 and the live function do not work anymore.
$("#detail_content").on("click", ".close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
the div.detail_content is loading later via ajax but the close button do not work anymore if i change from .live to .on
I think the delegation is missing.
any idea?
Looks like #detail_content also is an dynamic one, then try
$(document).on("click", "#detail_content .close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
You should use any closest static parent element (or body at last):
$("body").on("click", "#detail_content .close", function() { ... });
So if you have the markup like:
<body>
...
<div id="container">
...
<div id="detail_content"><button class="close">Close</button></div>
</div>
</body>
and #container is not replaced after Ajax call, then it is better to use:
$("#container").on("click", "#detail_content .close", function() { ... });
The .live() method is deprecated in jQuery 1.10 and above. Use .on() method to attach event handlers.
So you can use this code instead of .live()
$(document).on('click', '#detail_content .close', function(){
//your Code
});
I think this answer is useful for you and in this page you can see all deprecated method and it's useful for someone who want to migration from 1.7 to 1.10
VisioN, is it not the same to just use the following?
$(document).ready(function(){
$(".close").click(function(){
console.log("clicked");
}
});
Is there something about the code above that is slower or less efficient somehow?
Related
hey all i am appending a form to a page on click the form has some text boxes and i need to add event listner like on keypress but the function dosent works dont know where is the problem the function works well everywhere but not for this form here is the code.
appending the form
function activityCHART(thisobj){
var theidis=$(thisobj).attr("id");
$("#FULL_FADE").fadeIn();
$.ajax({
type: 'post',
url: 'newpage.php',
data:{'actde':theidis},
success: function(dataa){
$("#the_APPEDEDr5").empty().append(dataa);
}});}
newpage this textbox is present and some more text areas
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi"/>
add this event listner
$('#detp_names09o').keypress(function (e) {
alert('ok');});
these are some script links
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
i think there are some script link problem
alert comes when i does it like this onkeyup="thisisfun();" function thisisfun(){ alert('ok'); }
You should use live(), delegate() or on() to attach event listeners to dynamically added DOM elements. bind() and keypress() doesn't work for elements that are dynamically added to DOM[see this]
$('#detp_names09o').live("keypress",function (e) {
//do some stuff
});
.on() is mostly syntax sugar that can mimic .live(), or .delegate() depending on how you call it.
$('#detp_names09o').on("keypress",function (e) {
//do some stuff
});
Also, you have specified two different versions of jQuery. Though CDN's do have some advantages over locally referenced libraries, they might break your code at-times.
If thats the reason you've referenced to local jQuery file(along with CDN version), you might consider looking at CDN fallbacks. In either case, you should be careful about the version you are using.
Cheers!
To attach event to dynamically added elements,
Try binding the event using 'bind'
$('#detp_names09o').bind("keypress",function (e) {
alert('ok');
});
or use 'on'
$('#detp_names09o').on("keypress",function (e) {
alert('ok');
});
Also you dont require two versions of jquery in your page, also make sure this id is not duplicated
use onkeyup,.. attribute inside the element and call the function like this
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi" onkeyup="functionName()"/>
in javascript
function functionName(){
//your code
}
First of all you should decide what do u want to use, keyup or keypress ? For example if you want to use keyup and you are using jquery version greater than 1.7 then use
$(document).ready(function () {
$('#element').on("keyup",function () {
alert('result ok');
});
});
else u can use
$(document).ready(function () {
$('#element').live('keyup', function() {
alert('result ok');
});
});
Make sure that you are calling working script (check your script link), try not to make duplicate ids of elements instead use class and avoid using inline use of javascript. Happy Coding !
I have this jQuery code
if (Meteor.isClient){
jQuery(document).ready(function(){
jQuery('#content .row > div').mouseenter( function(){
jQuery('#content .row div .edit').toggle();
});
jQuery('#content .row > div').mouseleave( function(){
jQuery('#content .row div .edit').toggle();
});
});
}
When I run my app this just doesn't work. If I put that into chrome console it works perfectly. What's the problem?
This also happened before with different code.
Your code adds callbacks to DOM elements that exist when your code is executed. However, Meteor will add stuff to the page later, when rendering templates. Here's how it should be done:
Option 1) Use Meteor events
Template.asdf.events({
'click .classname': function(e) {
...
}
});
Option 2) In the rare cases you need something that does not work in the previous way, put JQuery stuff in rendered callback:
Template.asdf.rendered = function(){
_.each(this.findAll('.classname'), function(element){
$(element).on('mouseenter', function(){...});
});
};
Option 3) In the ultra-rare cases when you need some special treatment for all the page, use JQuery live binding
Meteor.startup(function(){
$('#content .row > div').on('click', function(){...});
});
You can use meteor events.
For example use Meteor.startup(function () { instead of jQuery(document).ready(function(){
You must check up on http://docs.meteor.com/#eventmaps
may it be easy :)
On is not working as a replacement for live; as the new ON is NOT working for future elements. No problems in my implementations; I'm used to use live and I definitely know when something works or not with jquery.
haml part :
.field
%label Select a file
= file_field_tag 'post[image]', :class => :dashed
%span.adder + add another file
coffe part :
$("span.adder").on "click", (e) ->
new_field = $(this).closest(".field").clone()
$(new_field).insertAfter( $(this).closest(".field") )
Why the new span.adder added does not have the jquery behaviour attached to their class ?
Something like this shoudl work in that case.
Why the JQuery guys did remove it ?
I don't get it.
UPDATE
$("span.adder").on("click", function(){ });
Will not work as live.
It has to be
$(document).on("click", "span.adder", function(){ });
(thanks for everyone's answers.)
To work with future elements you must use on document like this
$(document).on('click', 'span.adder', function(){
//Code here
});
Before .on() ever came around, .live() was already considered an inefficient way to handle event binding, Because of that for future use you have to use .on()
e.g:-
$(document).on('click', '#yourElement', function() {
// your functions here
});
There is a better explanation here
It is a replacement. The direct translation would be:
$(document).on('click', '.my-selector', function() {});
They deprecated and remove it because they had better implementation. You see the documentation of .on()
$(ancestor).on(event, element, function);
You should use that as ancestor which is near to that element. There are some performance issues.
Upgrade jQuery version also.
On works asdelegate` used to do, not exactly as .live; you have to use it on a parent and then specify the event and the children that triggers it; something like.
$(window).on("click", ".button", function(){
alert("You clicked the button... and I hate alerts");
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery 1.7 - Turning live() into on()
I have with jQuery:
$(".house td[red]").live("click", function() {
alert('ok');
});
but function live is deprecated. How can i use on?
$(".house td[red]").on("click", function() {
alert('ok');
});
not working.
$(".house").on("click", 'td[red]', function() {
alert('ok');
});
have you tried this? You can check in documentation for details. Example from there:
$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});
So you basically pass a "container" for wrapper. The reason why live is not recommended is that it can be written with "on" syntax like this:
$(document).on("click", '.house td[red]', function() {
alert('ok');
});
which you can see is not very efficient. Probably there's more to that :) so it is good you want to change it.
Use it as -
$(document).on("click", ".house td[red]", function() {
alert('ok');
});
The more efficient way is using .on() with immediate parent of the element -
$('.house').on("click", "td[red]", function() {
alert('ok');
});
Read here for better understanding of difference between live and on
on() is an all-things-to-all-men function that can work in different ways - both with direct and delegated events. live() was a means of achieving delegated events. This is achieved with on() by passing a filter as param 2, and bumping the callback to param 3:
$(".house").on("click", 'td[red]', function() {
alert('ok');
});
It's a three-argument variant, and you get to pick the "bubble" point:
$('body').on('click', '.house td[red]', function() { alert("ok"); });
The difference is that with this, the point at which the actual event handler is placed is under your control (like with the also-deprecated .delegate()). You can pick any parent element you like, which is a nice feature in complicated pages. (In your case, for example, you could put the handler on all the ".house" elements instead of the body.)
$(document).on('click', '.house td[red]', function(){
alert('ok');
});
Document is the static element we wish to attach our handler to.
First param is the event
Second param is the selector
Third param is the functions you wish to run against the selector when the event is fired.
Try this,
$(document).on("click", ".house td[red]", function() {
alert('ok');
});
$(".house td[red]").live("click", function() {
alert('ok');
});
Would be directly converted to this:
$(document).on("click", ".house td[red]", function() {
alert('ok');
});
But you can gain some performance by specifying the closest container that you know will exist at the time of the bind:
$('#someContainer').on("click", ".house td[red]", function() {
alert('ok');
});
$(document).on("click",".house td[red]",function(){
alert('ok');
});
When I added live() to some mousedowns, my not: conditional stopped working.
$("body :not(" + _self.somevar + ")").live('mousedown',
function(event){
event.stopPropagation();
// some more code
}
When it wasn't live() it worked. Now that I use live(), when I mousedown on that item, it fires when it shouldn't.
Anyone know why not: is no longer adhered to?
You can update your .live() method to .on() (to work with new versions of jQuery). So you need apply on the document an event of mousedown selecting the body :not(#notAcceptedElement). Example:
HTML:
<div id="notAccept">Not Accept Mousedown</div>
<div id="accept">Accept Mousedown</div>
JS (jQuery 1.6):
$('body :not(#notAccept)').live('mousedown', function(ev) {
console.log(ev.target);
$('#accept').clone().appendTo(document.body);
});
JS (jQuery edge/1.8):
$(document).on('mousedown', 'body :not(#notAccept)', function(ev) {
console.log(ev.target);
$('#accept').clone().appendTo(document.body);
});
Live example: jsFiddle jQuery-1.6, jsFiddle jQuery-edge.
I hope you know only one body tag you can use in a HTML page. In your case its better if you try to attach event for id/class. and syntax will be something like this,
For id of element
$("#not:'+ _self.somevar'+").live('mousedown',
function(event){
event.stopPropagation();
// some more code
}
For class of element
$(".not:'+ _self.somevar'+").live('mousedown',
function(event){
event.stopPropagation();
// some more code
}