I have a dynamically created form inside the element #addform with input fields. I am attaching events to the fields like so:
$('input[type=text]').on({focus:function(){console.log('d');}},'#addform')
Why does this not trigger? I read about .delegate() but I think it's supposed to work with .on()
You have the arguments reversed. It should be:
$("#addform").on({...}, 'input[type=text]');
The reason for this is that the actual binding is done to #addform. input[type=text] may not exist when .on is called.
I think this is more appropriate:
$('#addform').on({focus:function(){console.log('d');}},'input[type=text]');
$('#addform').on('focus','input[type=text]', function(){
console.log('d');
});
Does the same thing but is more readable I think.
Related
I have the following set in my JS:
$('.selector').selectpicker();
When new DOM elements are added to the page, the above method doesn't work on the new DOM elements. I know that, in other cases, I can do the following such that newly added DOM elements work:
$(document).on("click", ".class-here", function() {
});
But how can a method like the first changed to work with new DOM elements (rather than calling that same method again)?
The answer will depend on the function you're calling (here selectpicker).
If you're talking about the bootstrap function, you would do:
$('.selector').selectpicker("refresh");
After having changed the DOM.
You might use the level 3 event for DOM node creation, like .on("DOMNodeInserted",(selector),(function)) to execute your function whenever an element fitting the selector is inserted. See How to catch creation of DOM elements and manipulate them with jQuery
Your problem is regarding binding new element in DOM, Prior version of jquery use bind and unbind method for new element in dom.
But If you use jQuery 1.3+ then you can write
$('selector').live('event',function (){ //do some action });
In above jquery, You didn't need to bind/unbind element on DOM.
But latest version of jQuery 1.7+, You can directly use .on() method which you mentioned above, It mean that you didn't care to bind, unbind on 'DOM change'.
On() is simple that you can write common callback for multiple events on particular selector.
I hope that this details is useful to you and you got your answer. If you use 'on()' then you not need to bind element in DOM.
I have two codes. This one works like a charm-
$("input:radio").on('change',showRatingSection);
But this one throws "Object has no method 'live'" error-
$("input:radio").live('change',showRatingSection);
Any ideas why?
If I assume that you can't call live method on radios, then how would I bind an event on the radios which will be added to my DOM in future? I know I can bind as soon as they get added but I am looking for an alternative to live() if it can't be used with radios.
Use the best method!
$("body").delegate('input:radio','change',function(){
//do code here
});
This work with AJAX, without ajax. I had the similar problem with "live" function too, but since I use this anywhere, I have no problem at all.
You can try this, it's called Event Delegation: elements that are generated dynamically in the DOM you can fire events using the syntax following
$(document.body).on('click', "input:radio", showRatingSection);
and .live() has been deprecated since 1.7 version of jQuery
document.body refers to the closest parent element in the DOM,
Delegate the event:
$(document).on('change', "input:radio", showRatingSection);
"Object has no method 'live'"
Yes because in the latest jQuery versions live has been removed.
I am looking for an alternative to live()
Yes you have an alertnative to this as suggested in this answer and others, with use of .on() it has a special syntax for it.
$(document).on('event', "selector", function);
Note:
Delegating to $(document) is very costly (in terms of performance) so you should always try to delegate to the closest static parent (Which was available at the doc ready).
Also there is a point if you are delegating to the closest static parent you should put that event inside doc ready block but if you are delegating to $(document) then there is no need to put it in doc ready block.
I am wondering if anyone could tell me why the following is not working.
$("tbody[name=leadstores] tr").live('click',function(e){
alert("clicked");
alert(this.attr("id"));
});
Your underlying issue is the need to wrap this in a jQuery function. Otherwise you can't use jQuery's methods.
alert($(this).attr("id"));
Though this does not contribute to your Javascript error, you shouldn't use the name attribute on anything accept for input elements.
Additionally, .live() has been depreciated as of jQuery 1.7. You should use .on() instead.
Several things:
this is not a jQuery object and must be wrapped in $(this) to use jQuery methods
Are you sure TBODY has a name attribute? Not a common thing for a TBODY. If it doesn't have a name then selector won't find it
The code sample you provided does work (although, as others have pointed out, you need to wrap this in a jQuery wrapper.
Here's an example of your code (with some supporting HTML)
http://jsfiddle.net/Wmswm/
How do I bind the following to all future instances of checkboxes that might be added to my page dynamically. I'm not sure how to use the Live() method to do this.
$('input:checkbox').imageTickBox({
tickedImage: "/Content/Img/checkbox_tick.png",
unTickedImage: "/Content/Img/checkbox_notick.png",
imageClass: "tickbox"
});
You cannot do this with .live() (or .delegate()). Those are for binding event handlers for events which may not yet exist.
Description: Attach a handler to the event for all elements which match the current selector, now and in the future.
The image tick box plugin you're using is not any sort of "event." You will have to explicitly call the initialization code (e.g. $('selector').imageTickBox(...)) whenever a new checkbox is added.
.live() is for listening to events and then detecting where those events originated from. Adding elements to the page doesn't trigger anything that .live() can listen to. You'll have to call your plug-in initialization whenever you are adding the checkbox to the page.
This is definitely a duplicate question: Please see
jquery live event for added dom elements
Event binding on dynamically created elements?
I have a set of list items in unordered lists that I bind the anchors inside them to fire when clicked. The thing is: Some ul's are created (via ajax) when I click on some of the li's created in the first place, binded in the jQuery's document.ready. And I want this li's that are created dynamically to fire as well. Can I do that?
Well, I hope you get what i mean...
Check out live() method
Use it the same way as bind(), ie :
$('.class').live('click', function() {
alert('bla');
}
);
I think you are looking for live().
The live() event will work on all ul elements even if you create them after you bind the live method to them. Like so:
$('ul').live('click', function() {
// your code here...
}
See the info on live here.