click event on input button - javascript

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.

Related

Jquery appended buttons on click with classes

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 have to click twice to activate function using jQuery

I am having a lot of trouble with jQuery. I have to click twice on a button to make the page disappear. I have tried importing both versions of jQuery and I tried to use the fadeOut() function on different elements, but nothing has prevailed. It works the second time I click, but never the first. This is a recurring problem, and I need to know how it can be fixed. Here is my code:
HTML:
<body>
<h1>CSS3 Buttons Showcase</h1>
Click Me!
</body>
JavaScript:
function fadeBg(){
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}
You must change your function to:
function fadeBg(){
$("body").fadeOut(1000);
}
In your HTML code onclick is being set to run your function fadeBg. So in your function you must put what you want to run; in this case $("body").fadeOut(1000);
The issue is that you're not binding the jQuery event handler until the fadeBg() function is called on the first click. Try this instead:
<h1>CSS3 Buttons Showcase</h1>
Click Me!
$(function() {
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
});
There are two ways to bind a click to an element :
1. The old dirty inline javascript (avoid)
(HTML) : <button onclick="doSomething()">
and 2. the cleaner event binding
(HTML) : <button id="myButton">
(JS) : $('#myButton').click( doSometing )
You mixed both, binding two clicks on the same element.
<button onclick="doSomething()">
function doSomething(){ // will be done on first click
$('#myButton').click( doSometingElse ) // will be done on second click
}
You are doing the same action twice, the code is:
HTML
<body>
<h1>CSS3 Buttons Showcase</h1>
Click Me!
</body>
JavaScript
$(document).ready(function() {
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}
function fadeBg(){
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}
You added the onclick event directly in your html. This function adds a second event to the same button.
Just remove the onclick event in your element And do this:
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
It's considered bad practice adding onclick events directly in your html element. You can but it doesn't look good.

enable the button to be clicked only to once exception?

I use a dialog to get the user input, but I found the user may click double click the button and added the content twice, the cause is the dialog fadeout too slow or the user clicked twice on the mouse.. I don't want to adjust the fadeout speed, instead, how to enable the button only can be clicked once?
jQuery provides the one() method to register a one-shot handler that will only run once.
You can write:
$("#yourButton").one("click", function() {
// Add content...
});
You can disable the button once it was clicked to prevent any further clicks:
$('button').on('click', function() {
$(this).prop('disabled', true);
});
Here is my suggestion. If you are destroying the dialog on exit, just unbind the click event
$('.my-button').on('click', function(){
// process code
$(this).off('click');
});
You can read about off here
And here is a demo. First will not allow other clicks but the second will.
source
Here is a Plunker that shows how you can do this. Pretty much all you need to do is add the following line in your button:
onClick="this.disabled = true;"
So that your button HTML will look something like this:
<button type="submit" onClick="this.disabled = true;">Submit</button>
try this:
$('.myButton').click(function(){
$(this).attr('disabled',true);
....
})
try this with css
$("#yourButton").one("click", function() {
$(this).css('pointer-events', 'none');
})

Select and trigger click event of a radio button in jquery

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>

Click span inside jQuery button

Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle .
<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span> </div>
<div id="out"/>
$('#button1').button().click(function(){
$('#out').text('Button clicked');
});
$('#span1').click(function(){
$('#out').text('Span clicked');
});
Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?
Thank you.
Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.
Fiddle for demonstration
$('#span1').click(function(e){
$('#out').text('Span clicked');
e.stopPropagation();
});
or:
$('#span1').click(function(){
$('#out').text('Span clicked');
return false;
});
jSfiddle http://jsfiddle.net/kxntf/5/

Categories