I followed this example to capture an onChange() jQuery event for a radio button group:
JQuery $(#radioButton).change(...) not firing during de-selection
But in my case, the solution given in that example is not working. I have the following generated from my JSP:
<input id="object.reportEntity.reportEntityIsPrime1" name="object.reportEntity.reportEntityIsPrime" type="radio" value="Y_YES" checked="checked"/>Prime
<input id="object.reportEntity.reportEntityIsPrime2" name="object.reportEntity.reportEntityIsPrime" type="radio" value="N_NO"/>Not Prime
JS:
$(document).ready(function() {
// Display Alert on Radio Change
$('input[name=object.reportEntity.reportEntityIsPrime]:radio').change(function () {
alert('Radio Button clicked');
});
}
The alert is not being diplayed. Also, there's this error:
Syntax error, unrecognized expression "input"
You should delegate the events.
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
Also, you need to add " in your selector e.g. [name=""] Observe the following...
$('body').on('change', 'input[name="object.reportEntity.reportEntityIsPrime"]:radio', function() {
alert('Radio Button clicked');
});
side note: you are missing ); on the end of your ready function
JSFiddle Link - working demo
Also, be sure to check out the jQuery Understanding Event Delegation docs for more info
Use quote marks for your name like this:
$('input[name="object.reportEntity.reportEntityIsPrime"]:radio')
Quote the name attribute in your selector string.
$(document).ready(function() {
// Display Alert on Radio Change
$('input[name="object.reportEntity.reportEntityIsPrime"]:radio').change(function () {
alert('Radio Button clicked');
});
}
Related
I appended the checkbox input field from javascript. after that, I need to catch click event of that checkbox field. But I could not. I tried with these following instruction:
- An append in jquery code and click function?
- jQuery 1.9 .live() is not a function.
This is my code
var htmlData='<input type="checkbox" name="is_pay[]" class="is_pay">';
$('.container').append(htmlData);
$('.is_pay').on('click', function(){
alert('hi');
});
Because that item does not exist when the script is run, so listen for a click on .container:
var htmlData='<input type="checkbox" name="is_pay[]" class="is_pay">';
$('.container').append(htmlData);
$(".container").on("click", ".is_pay", function() {
alert("hi");
});
Event handler will only run if element exist on the page therefore your script click handler is not worked as you are adding checkbox dynamically .
If any new element injected to page dynamically then use delegated event to attach event handler . Replace click handler with the following code
$("document").on("click", ".is_pay", function() {
alert("hi");
});
You can simply handle with .click()
var htmlData='<input type="checkbox" name="is_pay[]" class="is_pay">';
$('.container').append(htmlData);
$('.is_pay').click(function(event) {
alert('hi');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'></div>
I'm generating a list with buttons for every new element.
This part is in a javascript function generating the list. I've given the button a class called adding. I'm expecting a message when I click on a button. Following other entries and pages about this subject have gotten me this far but I need an extra explanation on what I'm doing wrong.
Part of javascript for list (vehicleList.js):
... + '<input class="adding" type="button" name="vehicle" value="Add vehicle">' + ...
Javascript for click (part of html):
<script>
$(function() {
$('.adding').on('click', '.adding', function(){
alert('Click detected');
});
});
</script>
If you want to use this syntax of code you need to target the document (or parent element) by using something like this:
$(function() {
$(document).on('click', '.adding', function(){
alert('Click detected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="adding">click me</button>
As you can read here:
.on( events [, selector ] [, data ], handler )
..
selector
Type: String
A selector string to filter the descendants of
the selected elements that trigger the event. If the selector is null
or omitted, the event is always triggered when it reaches the selected
element.
And this will work for dynamically generated button.
i am trying to alert some text when a dynamically generated radio button is checked .. here is the link from fiddle ..
http://jsfiddle.net/z7cu3q0y/
function createRadioButtons(n)
{
$("#radioContainer").empty();
for(var i=0;i<n;i++)
{
radioButtons = "<p><input type='radio' class='"+n+"' name='"+n+"'>"+(i+1)+"</p>";
$("#radioContainer").append(radioButtons);
}
}
$("#dropDown").on("change",function()
{
createRadioButtons(parseInt($(this).val()));
});
$("#radioContainer input").on("change",function()
{
alert("checked");
});
when i click on radio button i am not getting alert .. can any one of you please help me in taking a look ?
Thanks in advance,
Ashwin
Your code $("#radioContainer input").on("change",function(){})
will directly attach the event handler to the matching elements that are currently present in DOM.
To work with dynamically generated elements added in the future, You need to delegate your event handler to a common parent element:
$("#radioContainer").on("change","input",function(){
alert("checked");
});
The above will attach the handler to #radioContainer, Whenever the corresponding event (change in this case)is triggered (Usually propagated from the children), it checks whether the event target matches the specified selector (input in this case) and invokes the handler accordingly.
Updated Fiddle
You need to use .on() for dynamically generated elements like below. Here .on() will bind change event to all radio buttons which are inside radioContainer
$("#radioContainer").on("change","input[type=radio]",function()
{
alert("checked");
});
Demo
Try using the below code
$(document).on("change","#radioContainer input",function(){
alert("checked");
});
Updated fiddle
You need to put the input defined as click area and radiocontainer as working area.
DEMO: http://jsfiddle.net/don/z7cu3q0y/3/
Just remove input before .on and put inside of the function.
jQuery:
function createRadioButtons(n)
{
$("#radioContainer").empty();
for(var i=0;i<n;i++)
{
radioButtons = "<p><input type='radio' class='"+n+"' name='"+n+"'>"+(i+1)+"</p>";
$("#radioContainer").append(radioButtons);
}
}
$("#dropDown").on("change",function()
{
createRadioButtons(parseInt($(this).val()));
});
$("#radioContainer").on("change", 'input', function()
{
alert("checked");
});
Is it possible to pass more than one child selectors in the jQuery on method?
$("#tablename").on("click", "tr", function() {
}
click needs to be fired if the user click on tr or checkbox. Something like:
$("#tablename").on("click", "tr input[type='checkbox']", function() {
}
Thanks in advance...
You can use multiple selector to specify more than one selector
$("#tablename").on("click", "tr, input[type='checkbox']", function() {
});
But in a table all elements could be in a tr so what is the difference
You can combine them with comma using multiple selector, the closing parenthesis is also missing. If you have space instead of comma it is treated as descendant selector.
$("#tablename").on("click", "tr, input[type='checkbox']", function() {
});
You can use comma , for multiple selector
$("#tablename").on("click", "tr, input[type='checkbox']", function() {
//use "," ---^^^---- here for multiple
});
reference multiple-selector
Yes you can, your code works fine. But the problem is the event will be fired twice if the check box is inside the 'tr'. To prevent it you have to force the event delegation. You receive the event as a argument and in your code use e.preventDefault(). This will make sure click event is not delegated from checkbox to parent 'tr'.
$("#tablename").on("click", "tr, input[type='checkbox']", function(e) {
//e.preventDefault(); // This is wrong, plz check
e.stopPropagation(); // Hope this will help you one day
});
I do not know the correct terminology for this, but I want the same effect as onclick but for a check box with jquery or javascript.
onclick version:
Link
I want the same effect as above but for a checkbox. The end result will be that the page should reload with an updated php query, but that part I can do. I just don't know what the onclick is for checkboxes.
checkbox:
<input type="checkbox" name="change" value="one" />changes php query
You should listen to the change event, as the checkbox can be selected or deselect with the keyboard too:
$('input[type="checkbox"][name="change"]').change(function() {
if(this.checked) {
// do something when checked
}
});
Similarly with plain JavaScript:
// checkbox is a reference to the element
checkbox.onchange = function() {
if(this.checked) {
// do something when checked
}
};
And last, although you really should not use inline event handlers, but if you have to:
<input ... onchange="handler.call(this)" />
where handler is like the handlers shown above.
Further reading:
jQuery documentation
MDN JavaScript Guide
quriksmode.org Introduction to Events
$('#input_id').click(function() {
// do what you want here...
});
$('input:checked').click(function() {
//do something
});
See http://api.jquery.com/checked-selector/ and http://api.jquery.com/checkbox-selector/