Upon document load, am trying to trigger the click event of the first radio button.... but the click event is not triggered.Also, tried 'change' instead of click ...but its the same result.
$(document).ready(function() {
//$("#checkbox_div input:radio").click(function() {
$("input:radio:first").prop("checked", true).trigger("click");
//});
$("#checkbox_div input:radio").click(function() {
alert("clicked");
});
});
Please follow the below link to the question
Example:
http://jsbin.com/ezesaw/1/edit
Please help me out in getting this right.
Thanks!
You are triggering the event before the event is even bound.
Just move the triggering of the event to after attaching the event.
$(document).ready(function() {
$("#checkbox_div input:radio").click(function() {
alert("clicked");
});
$("input:radio:first").prop("checked", true).trigger("click");
});
Check Fiddle
Switch the order of the code: You're calling the click event before it is attached.
$(document).ready(function() {
$("#checkbox_div input:radio").click(function() {
alert("clicked");
});
$("input:radio:first").prop("checked", true).trigger("click");
});
My solution is a bit different:
$( 'input[name="your_radio_input_name"]:radio:first' ).click();
$("#radio1").attr('checked', true).trigger('click');
In my case i had to load images on radio button click,
I just uses the regular onclick event and it worked for me.
<input type="radio" name="colors" value="{{color.id}}" id="{{color.id}}-option" class="color_radion" onclick="return get_images(this, {{color.id}})">
<script>
function get_images(obj, color){
console.log($("input[type='radio'][name='colors']:checked").val());
}
</script>
Related
I have a problem I noticed many times but still haven't understood the real reason.
I have a script that append some .btn buttons by clicking the button #add.
Of course the .btn buttons are to be clicked. So I made an event after the append():
$(".btn").on('click', function(){
alert('clicked');
});
This function works as I want. When I create a button and click on it, it will alert me. But the problem comes when I create more than one button and that I click on one of them. It will pop up an alert for the button I clicked, and for each button with the class that comes after it in the source code.
(As an example, if I create 3 buttons, if I click the first it will alert three times. If I click the second it will alert two times, and if I click the last, it will alert one time.)
I assume that it must be about some Javascript notions I haven't well understood yet. Probably a problem with the class ? I'm a bit lost.
Here is an example if you want to see by yourself : https://jsfiddle.net/nmza0ae4/
Thank you in advance !
Try this : when you add click handler to button user $(".btn").on('click'.. it will add to only available buttons at that point of time.
To add click handler to dynamically added buttons, use below code
$(document).on('click',".btn", function(){
alert('clicked');
});
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
$(".btn").on('click', function(){
alert('clicked');
});
});
What you are doing is adding event handler on each click. When new button is added, new event handler is attached to button and hence multiple alert.Put event handler outside the scope
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
$(document).on('click',".btn", function(){
alert('clicked');
});
You can use $(document).on('click' function ...
$(document).ready(function(){
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
});
$(document).on('click',".btn", function(){
alert('clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">
Add
</button>
As the Add button adds to dom you will need event delegation. Code for adding the button tag looks fine.
$(document).ready(function(){
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
});
$(document).on("click",'.btn', function(){
alert('clicked');
});
You can unbind the event before binding the event like this.
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
$(".btn").off("click");
$(".btn").on("click",function(){
alert('clicked');
})
});
or you can globally write the click event for all the dynamically added button like
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
$(document).on('click',".btn",function(){
alert('clicked');
});
But the standard way is the 2nd one.
https://jsfiddle.net/Rishi0405/nmza0ae4/2/
try this:
$(document).ready(function(){
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
$(document).on('click',".btn", function(){
alert('clicked');
});
});
I want to trigger a click event on a div. I use the following code but it is not working.
$('#showbanner').trigger('click');
<div id="showbanner">show banner</div>
What is that I am doing wrong? I actually want to show the banner 2 seconds after page is loaded. Before I could add delay event my click event for this div is not firing.
Here is my code example: http://codepen.io/anon/pen/aOzyxo
The issue is because your trigger('click'); call is the first thing in your script; it's called before the event is attached.
You need to move it to the end of the script so that the event handlers are bound when it is called:
Updated Codepen
enter code here
Try this .
$(function () {
$(document).on("click", "#showbanner", function () {
alert('Hola');
});
$("#showbanner").click();
});
show banner
Try this
JS
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').trigger('click');
HTML
<div id="showbanner">show banner</div>
Try this
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').click();
I have very annoying problem in my code.
When I change a checkbox state, the click event of it parent fires as well.
I've tried different methods to solve this problem like:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false
Unfortunately no one works for be (probably it's not related to "event propagation" issue). How can I make ('.sortable').click not to be fired on checkbox change?
HTML
<div class="sortable">
<span>Hello all!</span><br />
<label>Click on me<input type="checkbox" checked="checked" /></label>
</div>
jQuery
$(function(){
$('.sortable input[type=checkbox]').change(function(event){
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
alert('checkbox changed');
});
$('.sortable').click(function(){
alert('sortable clicked');
});
});
You can find the code on: Demo
As you have bind click event to parent div, it is firing that also. You can check the 'target element if not checkbox' condition in parent click event handle like below
$('.sortable').click(function(event){
if(event.target.type!="checkbox")
console.log('sortable clicked');
});
Demo
coz You're Stopping propagation of .change() event and handling .click() event
Just Try changing:
$('.sortable input[type=checkbox]').change(function(event){ ... });
to:
$('.sortable input[type=checkbox]').click(function(event){ ... });
Hope it helps!
Here is a working example: http://fiddle.jshell.net/vjKGv/
I have done some research on jsfiddle
$(function(){
$('.sortable').click(function(e){
e.preventDefault();
console.log('sortable clicked');
});
$('.sortable input[type=checkbox]').click(function(event){
//event.stopImmediatePropagation();
event.stopPropagation();
//event.preventDefault();
console.log('checkbox changed');
});
});
I try to bind a function to the click event on input button, but it doesn't seems to work and method is not called:
<div id='back'>
<input type="button"/>
</div>
jQuery:
$('#back').click(clickOnBackbutton);
function clickOnBackbutton(){
console.log('back to menu'); //function not called
}
I do not prefer to use onClick event, instead i prefer to use that approach. Thanx in advance.
You should put your code within document ready handler. also note that you are selecting the div tag instead of the input element.
$(document).ready(function(){
$('#back input[type=button]').click(clickOnBackbutton);
// $('#back input[type=button]').click(function(){
// or do something here
// });
})
Button:
<div id='back'>
<input type="button" id='back-button'/>
</div>
jQuery:
$(document).ready(function(){
$('#back-button').click(function(){
console.log('Back to Menu');
});
})
You bound to the div not the button.
give the button a name or select it as a child then bind the click event.
<div id='back'>
<input id='backbutton' type="button"/>
</div>
JQuery
$('#backbutton').click(clickOnBackbutton);
function clickOnBackbutton(){
console.log('back to menu'); //function not called
}
This should work:
function clickOnBackButton(){
console.log("back to menu");
}
$('#back').click(function(){
clickOnBackButton();
});
You could do this
$('#back').click(function(){
clickOnBackButton();
});
I don't think there's such a thing as an input type="button". Maybe type="submit" ?
Also you can use:
$('#back').on('click', function(){
// some action
});
JQuery 1.7+ you should attach the event using on.
function clickOnBackbutton(){
console.log('back to menu'); //function not called
}
$(document).on("click", "#back", clickOnBackbutton);
Running example
If you want div#back to capture clicked button event, then with the recent jquery you have to do this:
$('#back').on("click", "input[type=button]", clickOnBackbutton);
Note that you have to put script tag in the end of body, or wrap your code in $(document).ready event.
I want to show a paragraph by clicking on the button with the jQuery. But when it is visible, then I want to hide it by clicking anywhere else than the button (ie. anywhere outside the button).
For example, here is my code:
<p style="display: none">Hello world</p>
<button>Say Hello</button>
jQuery:
$("button").click(function () {
$("p").show();
});
here is jsfiddle link:
http://jsfiddle.net/k9mUL/
How can I hide it by clicking outside the button? Thanks
You could bind a click event handler to the document, as well as the one on the button. In that event handler, hide the p element:
$("button").click(function (e) {
$("p").show();
e.stopPropagation();
});
$(document).click(function() {
$("p").hide();
});
You need to stop the propagation of the click event in the button click event, otherwise it will bubble up to the document and the p element will be hidden again straight away.
Here's a working example.
You can take advantage of event bubbling by binding your handler to the click event of the document and using event.target to determine if the user clicked the button or something else in the document:
$(document).click(function(event) {
if ($(event.target).is("button")) {
$("p").show();
} else {
$("p").hide();
}
});
Although doing it manually is great, there is a plugin which allows you to add this functionality of it helps you:
http://benalman.com/projects/jquery-outside-events-plugin/
You can bind an event handler to the click event on the whole document and check if the targeted element is not a button:
$(document).click(function(e){
if(e.target.nodeName.toLowerCase() != 'button')
$('p').hide();
});
Or here's a more "jquery" way :
$(document).click(function(e){
if(!$(e.target).is('button'))
$('p').hide();
});
Live DEMO.
<p style="display: none">Hello world</p>
<button onclick='show(event);'>Say Hello</button>
function show(e){
$("p").show();
e.cancelBubble = true;
document.addEventListener('click',hide,false);
}
function hide(){
$("p").hide();
document.removeEventListener('click',hide,false);
}