use jQuery live method on radio button - javascript

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.

Related

Have newly added DOM elements use function

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.

Hook that applies to elements inserted later

Functions on JavaScript/jQuery selectors apply to elements that were on the page before the function is read. For example,
$('.foo').css('color', 'red');
applies to elements with class foo at the time this part of code was read, but do not apply to elements that were inserted later via JavaScript/jQuery functions such as append(), etc. Is there a way to define a hook that applies automatically at the time when an element is inserted?
Using $('.foo') as your selector will match all elements with the foo class whether they've been added after load or not.
For events:
.live() has been removed from newer versions of jQuery so you should use .on(). Here's an example:
$(document).on('click', '.foo', function(){
// click event code here
});
This event will match .foo elements when the page loads as well as any which are loaded via .append(), .html() etc.
UPDATE:
I think I understand what you mean now. There's a plugin called Live Query which should solve your problem. Just include it then use:
$('.foo').livequery(function() {
$(this).css('color', 'red');
});
Here's a working demo: http://jsfiddle.net/5jJAE/
I'm not sure I completely understand your question but let me try and answer.
Dynamic Elements do count!
When you call a method on a JQuery selector it applies to all objects in the DOM that match your selector criteria.
Just to be clear, this includes elements that were added dynamically. For example, take the method "hide" below, applying to a dynamically inserted element.
$('body').append('<h1 id="test" style="display:none;">HI!</h1>');
$('#test').show();
So, it's not that JQuery won't apply to dynamically inserted elements, BUT it just won't apply to elements that don't exist yet. In other words, it won't apply to any elements that are added AFTER your call.
The live() method
However, JQuery does have a clever little method called "live()" which might apply to your needs.
Description: Attach an event handler for all elements which match the current selector, now and in the future.
http://api.jquery.com/live/
Update - live() is deprecated but on() can be used
The replacement to live() is on(). However on() doesn't work quite like live() and to make it work for future elements you have to place an "on" event handler in the PARENT element of future elements.
See this answer for more detailed info: Turning live() into on() in jQuery

jquery .on() event map on dynamic elements not working

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.

when a user clicks on table tbody tr

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/

Using the Live method to bind a function to dynamically created checkboxes

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?

Categories

Resources