I want to bind a function to a button with the .on method. Here is my button:
<button class="btn btn-primary col-md-offset-2 col-md-4" type="button" id="reg">Register</button>
And here is my script.
$(document).ready(function(){
$("#reg").on("click", function(){
alert("Its working!!!");
});
});
I know that my code is not wrong, but I still can't make it work.... I have include all the libraries in my <head>. But the button does nothing.
You are not wrong your code is working fine
$(document).ready(function(){
$("#reg").on("click", function(){
alert("Its working!!!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="btn btn-primary col-md-offset-2 col-md-4" type="button" id="reg">Register</button>
If button adding dynamically try to use:
$(document).ready(function(){
$("body").on("click", "#reg", function(){
alert("Its working!!!");
});
});
Please add the jquery library in head tag and it will work fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Related
I'm trying to trigger the click event of a button inside a form using jQuery.
$(".switchLang").on("click", function(e) {
console.log("Clicked!")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline" action="">
<button type="button" class="btn mr-3 btn-link transparent switchLang">${{index.keys.lng}}$</button>
<button type="button" class="btn mr-3 btn-outline-light">${{index.keys.login}}$</button>
<button type="button" class="btn btn-primary">${{index.keys.getStarted}}$</button>
</form>
The function above is not invoked!
After research, I tried many solution but nothing's work. Like adding e.preventDefault(); inside the function also remove .click and replaced with .on and so on, but nothing works!
I have referred to this question: here.
Thanks.
Solved
I double checked my code. the html is written inside script of type text/template and this template is rendered before the jquery code. Thanks.
You could try
$(document).on("click",".switchLang",function (e) {
console.log("Clicked!")
});
Try this might help
$(document).on('click', '.switchLang', function (e) {
console.log("Clicked!")
});
You need to wait for the document to be ready before adding the click handler, like so:
$(document).ready(function () {
$('.switchLang').on('click', function (e) {
console.log("Clicked!")
});
});
I'm trying to create a click event to a button but it ain't working.
This is what I've got so far:
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="#background">
<div id="#showMoreComments">
<button id="#btn_showComments">Show more comments!</button>
</div>
</div>
I know it's kind of a silly question. But what am I doing wrong?
First remove the "#" from the id declaration in button tag i.e have this:
<button id="btn_showComments">Show more comments!</button>
Second, move the script below the html.
Remove the # from the button id. The # tells JQuery to select an element with the following id.
Like this:
<div id="#background">
<div id="#showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<button id="#btn_showComments">Show more comments!</button>
should be -
<button id="btn_showComments">Show more comments!</button>
then your code will work just fine. :)
Kindly don't use # in HTML tags for IDs. # is attached to get an element using its ID.
Try this code, actually you have added # in your html code for ids. Please remove it.
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="background">
<div id="showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
Remove the # from the element in the html.
<div id="background">
<div id="showMoreComments">
How would I fire a button click event when a particular button is pressed (in this case the accept button).
I've tried the following but with little success:
Javascript
$('.notification-expand .Request .active-item > .accept-button').click(function () {
alert("hello");
});
HTML
<div class="notification-expand Request active-item" style="display: block;">
<div class="notification-body"></div>
<br>
<p>
<button type="button" class="btn btn-success accept-button btn-sm">Accept</button>
</p>
<div class="row">
<div class="col-xs-6 expand-col">
<button type="button" class="btn btn-warning barter-button btn-sm">Barter</button>
</div>
<div class="col-xs-6 expand-col">
<button type="button" class="btn btn-danger reject-button btn-sm">Reject</button>
</div>
</div>
</div>
Fiddle here
You have error in your selector , it should look like this:
$('.notification-expand.Request.active-item .accept-button').click(function () {
alert("hello");
});
You need to concatenate all classes without spaces to catch your target button
$('button.accept-button', '.notification-expand.Request.active-item').click(function () {
alert("hello");
});
See the updated snippet
Notice the syntax of ".className1.className2" instead of ".className1 .className2"
should be something like:
$('button.accept-button').click(function(){ ... });
there is really no need to go down the whole list if this is the whole code
----edit----
so when there are more items but only 1 active(i guess) then just target the active-item class:
$('div.active-item button.accept-button').click(function(){ ... });
try
$('.accept-button', $('.notification-expand.active-item')).click(function () {
alert("hello");
});
or
$('.notification-expand.active-item')).find('.accept-button').click(function () {
alert("hello");
});
Just give the button an id and reference back to that.
HTML
<button id="btnSubmitData"> Ok Button </button>
JQuery Code
$('#btnSubmitData').click(function(){ ... });
You can also have multiple button Ids bind to the same event:
$('#btnAccept, #btnReject, #btnWarning').click(function () {
alert("hello");
});
Take a look at the updated Working Fiddle.
I am trying to do a Bootstrap switch, by default it's set to off but when I click on it does not change?
I grabbed the codes of this site where it works fine: http://www.bootply.com/92189
Maybe I'm missing something? I'm really not sure.
EDIT:
Why does it not work with the javascript in the script tags, but instead it works in JSFiddles javascript container?
http://prntscr.com/47xuqk
http://prntscr.com/47xuy6
thanks
JSFiddle HERE
Javascript:
$('.btn-toggle').click(function() {
$(this).find('.btn').toggleClass('active');
if ($(this).find('.btn-primary').size()>0) {
$(this).find('.btn').toggleClass('btn-primary');
}
if ($(this).find('.btn-danger').size()>0) {
$(this).find('.btn').toggleClass('btn-danger');
}
if ($(this).find('.btn-success').size()>0) {
$(this).find('.btn').toggleClass('btn-success');
}
if ($(this).find('.btn-info').size()>0) {
$(this).find('.btn').toggleClass('btn-info');
}
$(this).find('.btn').toggleClass('btn-default');
});
$('form').submit(function(){
alert($(this["options"]).val());
return false;
});
HTML:
<h4>Tiny</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-primary active">OFF</button>
</div>
You haven't included jQuery, which is a required dependency for certain Bootstrap elements. You're also referencing the default global jQuery variable ($).
Add the jQuery framework and you should be good to go:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm new to jQuery and try to show a div when the user is clicking on a button. The button is below the text and is suppose to move up and down.
I tried a couple of things but couldn't work it out.
This is my code:
HTML
<div class="travel_infobox">
</div>
<div class="clearfix"></div>
<div class="travel_info_button">
InfoBox
</div>
jQuery
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("input.hide").click(function(){
$(".travel_infobox").hide(blind);
});
});
</script>
You have to use $(document)ready(function() {}); just one time, it is needed to let jQuery know when the page is fully loaded to run your code.
Then, that input.show I suppose there is an input button with show class somewhere, otherwise it doesn't work.
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
$("input.hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>
Try this. Where is your show and hide button? So I have added one.
<div class="travel_infobox">
Trave info
</div>
<div class="clearfix"></div>
<div id="travel_info_button">
InfoBox
</div>
<button id='show'>show</button>
<button id='hide'>hide</button>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("#hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>