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/
Related
I have a function which is called whenever a checkbox is clicked from a particular group.
I am trying to add a class to the input's parent wrapper when the checkbox is checked, and then remove the class when it isn't checked.
My problem is, I can't seem to get parentNode and classList working together.
eg. This code works:
$(this.parentNode).css( "border", "3px solid red" );
But this code returns an undefined error
alert($(this.parentNode).classList
For context, here's what I'm eventually trying to get to:
if ($(this.parentNode.parentNode).find('.form-type-checkbox').classList.contains("chkbox-checked")) {
$(this.parentNode.parentNode).find('.form-type-checkbox').removeClass("chkbox-checked");
} else {
$(this.parentNode).addClass("chkbox-checked");
}
I think the simplest solution could be like you should use toogleClass() of jQuery. Kindly refer the following code.
$("#id_of_radioButton").click(function(){
$("#id_of_parentNode").toggleClass("classname");
});
$(this.parentNode) is a jQuery object, as classList is pure JS property, this will not work on jQuery referenced object.
Try using jQuery's .attr():
$(this.parentNode).attr('class');
Don't blindly use jQuery for everything. this.parentNode.classList will be defined because it's not wrapped in jQuery, since classList doesn't exist in jQuery.
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.
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
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.
I have this line of JavaScript / jQuery that I'm attempting to use to append an element to the DOM and then attach an eventlistener to.
$('.faq_answer').prev().append(finalRender.cloneNode(true)).addEventListener("click", function () {toggle(this)}, false);
I know the appending part works perfectly but adding an event listener is giving me grief.
Is it possible / advisable to use jQuery and normal JavaScript together like this?
Or is there something in jQuery that would work better. (Very new to jQuery so bear with me).
If you want to use the native methods, then you need to call them against DOM elements, not jQuery objects
var clone = finalRender.cloneNode(true);
clone.addEventListener("click", function () {toggle(this)}, false);
$('.faq_answer')
.prev()
.append( clone );
If you want to use jQuery, then you need to wrap the DOM elements in a jQuery object.
// Drop your DOM element----v----into a jQuery object
var clone = $( finalRender.cloneNode(true) ).bind("click", function (){
toggle(this);
});
$('.faq_answer')
.prev()
.append( clone );
You could do something like this:
$('.faq_answer').prev().append(finalRender.cloneNode(true)).click(function () {toggle(this)});
which is pure jquery
I think you're wanting to add your event Listener to the cloned Node - not to the prev() of .faq_answer.
If you're importing jQuery, why not use the .click() method anyway instead of mixing? It's simpler! :)
$('.faq_answer').prev().append(finalRender.cloneNode(true).click(function(){
toggle(this)
}));
Yes, it's possible to use them "together" because jQuery is JavaScript. However in this case there's really no reason to bind event handlers directly like that if you are using the library. It already knows how to manage event handlers, and doing it outside of its control is probably not a good idea unless you really know what you're doing.
I find questions like this are strange, because jQuery is JavaScript.
Based on this mixing up the code that is just plain JavaScript with jQuery code is fine.
But if there is a simpler way of doing what you want in jQuery then I would say to just use jQuery alone.