radio button of a class clicked jquery - javascript

I have following radio button in my page
<input type="radio" name="launch_selection" class="linkToSectionSurvey expandSectionSurvey" id="linkTosectionSurvey1" rel="Surveysection1">
<input type="radio" name="launch_selection" id="all_active_members" class="linkToSectionSurvey expandSectionSurvey">
And this the code in my js file, which I am using for radio button click event.
jQuery('input[type=radio].expandSectionSurvey').live('click',function(e){
});
My requirement is to check the class clicked.
Jquery function is getting called on radio button clicked.
Only issue is its not showing "checked" even after it is clicked.
Its an old application using jquery version 1.4.2, which I cannot upgrade because at almost all places ".live" is used.
Thanks in advance.

As this comment says everything:
.live() was deprecated in jQuery 1.7, removed in 1.9. Please convert to .on()
So, Only if your radio elements are dynamically generated/created only in this case you should follow the event delegation event binding. you have to convert it with .on() event listener in conjunction with change event:
jQuery(document).on('change', 'input[type=radio]', function(e){
if($(this).hasClass('expandSectionSurvey')){
// do something
}else{
// do something else
}
});
As per comment jquery v1.4.x:
jQuery('input[type=radio]').live('change', function(e){
if($(this).hasClass('expandSectionSurvey')){
// do something
}else{
// do something else
}
});

Add this flie as reference: or use old one
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
Use this, it may be helpful
$('input[type=radio].expandSectionSurvey').live('click',function(e){
alert('Test')
});
.live()
$(selector).live(events, data, handler); // jQuery 1.3+
.on()
$(document).on(events, selector, data, handler); // jQuery 1.7+

Related

JQuery: trigger() not calling related target

I have used the trigger() for checking the radio button after loading all the page content as the radio button value is coming from third party api.
I have make one option checked by default. So I used trigger() event for checking the radio button. The radio button have also it's click event.
In my code only radio button get selected but event is not firing.
my code is...
jQuery(document).ready(function($) {
jQuery("#btn_03").attr('checked', 'checked');
jQuery("#btn_03").trigger("change");
jQuery(".class input[type='radio']").live("change", function($) {
alert("clicked");
});
});
You need to assign the event handler before you trigger the event.
When you are actually triggering the event, you still haven't attached any listeners for that event. You are doing that in the next line. Thus the event change does get triggered but nothing happens on that event.
You can do it this way
jQuery(document).ready(function($) {
jQuery("#btn_03").attr('checked', 'checked');
jQuery(".class input[type='radio']").on("change", function($) {
alert("clicked");
});
jQuery("#btn_03").trigger("change");
});
Also use "on" to bind events instead of "live" as per the latest jQuery documentation
You need to trigger event after you attach event handler:
jQuery(".class input[type='radio']").on("change", function(e) {
alert("clicked");
});
jQuery("#btn_03").prop('checked', true).trigger("change");
Also use $.fn.on instead of long time ago deprecated $.fn.live. And it's better to set checked property instead of attribute.
You need to hook the change event before you actually call the change event. I've included a fiddle of the functionality you requested.
I've changed the change-event target to be the actual radio input since I did not have your html, but normally you would most likely want to use the name of the radio group to hook the event to, since those are usually coupled with a single behaviour - like so $("input[name='radioName']").change(function(){ // Change event code });
Sidenote: You can use '$' instead of of 'jQuery' to start an expression.
http://jsfiddle.net/du58fo3t/
$(document).ready(function() {
$("#btn_03").attr('checked', true); // Check radio button
// Hook change event on radio button
$("#btn_03").change(function() {
alert("clicked");
});
// Trigger change on radio button
$("#btn_03").trigger("change");
});

Javascript add onclick event to radio buttons on window load

I need to add an onClick event to radio buttons that will then enable me to call another function (calculateTotal).
I can't edit the HTML, so I'm using 'delegate' to target specific elements. The following code is my attempt, but it does nothing:
window.onload = function(){
$('form').delegate('input[type="radio"]', 'focusin', function () {
$(this).onclick = function() { 'calculateTotal()' };
});
};
Can someone help out?
You should not use ugly onclick. You should bind event using jQuery like
Use
$('form').delegate('input[type="radio"]', 'click', calculateTotal)
However if you are using latest version on jQuery use .on()
$('form').on('click','input[type="radio"]', calculateTotal)
You can bind click event to all radio buttons on document ready:
$(function(){
$('form input[type="radio"]').on('click', calculateTotal);
});
If you want Click event use click event instead of focusin, like this:
$('form').delegate('input[type="radio"]', 'click', calculateTotal)
^^^^^^^
DEMO
Note: If you are using Jquery version >= 1.7. You can use .on() instead of .delegate()

Trigger "change" event on input does not work

I created kind of custom checkbox's plugin for my own project.
So I wanted to trigger <input type="checkbox"> manually clicking on another button like this:
$("a#triggerButton").click(function(){
$("input[type='checkbox']")
.prop("checked", true)
.triggerHandler("change");
});
Here is a typical example of what I'm doing: http://jsfiddle.net/fstqvq8k/3/
It seems that the event isn't triggered. I used a lot of methods but not seems to work too:
$("input[type='checkbox']").change();
$(document).on("change", "input[type='checkbox']", function(){});
Since you dynamically create your button:
$("#container").on("click", "#triggerButton", function() {
$("#customCheckbox")
.prop("checked", true)
.trigger("change");
});
http://jsfiddle.net/fstqvq8k/4/
Also from the Docs read:
The .triggerHandler() method does not cause the default behavior of an event to occur (such as a form submission).
You can also trigger the checkbox event like..
$("input[type='checkbox']").click();

jquery trigger change event on checkbox

Is it possible to trigger change event on a checkbox using javascript/jquery?
Something like this (I run triggerChange on click of a button):
<label><input type="checkbox" id="chk"/>Label for chk</label>
<script>
function triggerChange(){
$("#chk").trigger("change");
}
</script>
When I run the above code I get this error: "trigger is not a function".
That trigger is not a function error message indicates something else is at play. According to this SO question:
What happens when a jQuery selector wasn't found?
no.good.at.coding says:
Do note however that you must ensure that selector is a jQuery object!
Otherwise, you could get an error indicating that "trigger is not a
function".
It's likely that you have forgotten jQuery?
As for your implementation, you should be fine the way you are using it. But trigger should be used to trigger event methods on elements that have already been attached via jQuery. Check out my demo:
Fiddle:
With click event: http://jsfiddle.net/fS4R5/1/
Without click event: http://jsfiddle.net/fS4R5/2/
HTML:
<label><input type="checkbox" id="chk"/>Label for chk</label>
JS:
function triggerChange(){
$("#chk").trigger("change");
}
$("#chk").change(function() {
alert("triggered!");
});
triggerChange();
In jQuery, you can usually trigger an event by calling it's eventhandler method withoud any function parameters.
For example a click handler can be assigned as such:
$('#mything').click(function(e){dostuff});
the click event in itself can be triggered by simply running:
$('#mything').click();
I suspect this can be done for every existing event in jQuery.
Be sure that Input of Type checkbox is enabled, in case is disabled trigger will not fire event
//fire event
$('#ceckBoxId').click();
$('#ceckBoxId').trigger('click');
or change checkbox checked val
$('#ceckBoxId').prop('checked', true);
$('#ceckBoxId').prop('checked', false);
I think the preferred method since 1.9.1 is 'on'. Specially if you use dynamically added checkboxes.
Say you have a div with id='divCOntent' and on it is a checkbox with id='cballaut', you could do this
$('#divcontent').on('click', '#cballaut', function (e) {
alert(this.checked);
});
use prop method.
$('#myCheck').prop('checked', true);
$('#myCheck').prop('checked', false);

Use JS that is already loaded, on HTML loaded via jQuery's load() function?

Not sure if this is posible or not, but I'm trying to use JavaScript that I loaded via a script tag when the page was initially requested on dynamic HTML that was loaded via jQuery's load() function.
Example: http://jsfiddle.net/3MR43/
As you can see in the example, after clicking a link in the pop up box, the link goes. The problem is that the link was suppose to be stopped, and you were suppose to see an alert.
However, if I paste the HTML that I am loading via jQuery, it works, so the code is fine.
Description
You need jQuery .live() or .on() method to bind events to dynamically created html.
Choose .live() or .on() depending on the version of jQuery you are using.
.live() Available since jQuery 1.3. Attach an event handler for all elements which match the current selector, now and in the future.
.on() Available since jQuery 1.7. Attach an event handler function for one or more events to the selected elements.
Check out my sample and this jsFiddle Demonstration
Sample
... for jQuery.live()
$('.lang').live("click", function(e) {
e.preventDefault();
alert('Testing..');
});
... for jQuery.on()
$('.lang').on("click", function(e) {
e.preventDefault();
alert('Testing..');
});
More Information
jsFiddle Demonstration
jQuery.live()
jQuery.on()
The problem is your .click will do it for only elements that exist at that time. If you want to do it for all potential future elements that that selector will match, you want to use on() (delgate() or live() with older versions of jQuery).
The $('.lang').click() event must be registered after the element is created!
You need a callback on the load function to register this.
You need to use live to attach handlers to elements that are loaded dynamically.
Try this, it will solve your problem.
$('.lang').live('click',function(e) {
e.preventDefault();
alert('Testing..');
});
You have to use on function for dynamicly loaded elements:
$('.open_lang').click(function(e) {
e.preventDefault();
$('#popup').load('http://skins.thehabbos.org/pop_up/language.php').css('display', 'block');
});
$('body').on('click', '.lang', function(e) {
e.preventDefault();
alert('Testing..');
});
(live and delegate are deprecated in JQuery 1.7+ which is the version of your JSFiddle)
Fixed JSFiddle

Categories

Resources