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!")
});
});
Related
I'm having trouble changing a button value in bootstrap. I can change it using jQuery, but i'm changing it from a modal dialog. I looked elsewhere on SO but I couldn't find anything that seemed to match my specific issue?
Steps:
Click button. Change button text on main html form. Upon clicking the
button it changes the text, closes the modal, and then immediately
the text changes back to what it was originally. It should just change the text and stay that way, obviously.
$("#validate-rv-button").click(function () {
$("#review-history-validate").val("Review History");
});
HTML
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="Validate" />
Any help would be much appreciated.
Another way to do it with <button></button>
<button id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" />Validate</button>
in jquery:
$("#validate-rv-button").click(function () {
$("#review-history-validate").text("Review History");
});
I believe you got the naming wrong.
This works:
$("#review-history-validate").click(function () {
document.getElementById("review-history-validate").value = "My value";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="elo" />
Or jQuery only as your question:
$("#review-history-validate").click(function () {
$("#review-history-validate").val("My value");
});
I am using html and jquery on my page.
In my html i have one button which when clicked will fire one function.
When page loads i call main function in document ready. Here is my code
<script>
$(document).ready(function () {
main();
});
function main(){
//some code goes here
}
function search(){
//some logic
}
</script>
<div>
<button id="btnSearch" onclick="search()" >Search</button>
</div>
But when i click on button then it goes inside main function and executes code inside it. Why? It should only call function search and nothing else. What am i doing wrong?
by default BUTTONS are of type SUBMIT, try this instead
<button type="button" id="btnSearch" onclick="search()" >Search</button>
This is working fine for me. See demo
$(document).ready(function () {
main();
});
function main(){
//some code goes here
alert('main');
}
function search(){
//some logic
alert('search');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="btnSearch" onclick="search()" >Search</button>
</div>
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>
I have next html:
<a href="https://google.com" >
<div id="first"></div>
<div id="second"></div>
</a>
Currently when I click to div #first it takes me to https://google.com.I don't want it. I want to not have effect anchor on div #first, so when I click on div #first nothing is happen.
And I cannot handle anchor, let say that I can add javascript just for div #first.
EDIT
I forgot to tell that my div contain form with attached event submit:
<script>
function submitForm(_this){
//do Ajax call
return false;
}
</script>
<a href="https://google.com" >
<div id="first"></div>
<form method="post" onsubmit="return submitForm(this)">
<input id="email" name="Email" type="text">
<input id="submit" name="submit" value="Register" type="submit">
<form>
<div id="second"></div>
</a>
So if I add this:
<script>
jQuery("#first").on("click", function (e) { e.preventDefault(); });
</script>
Then my form doesn't work.
EDIT
So if add e.stopPropagation() on input submit click, like this
<script>
jQuery("#submit").on("click", function (e) { e.stopPropagation(); });
jQuery("#first").on("click", function (e) { e.preventDefault(); });
</script>
It will work fine, but e.stopPropagation(); doesn't work on fine in Safari. In Safari when I click on input submit it still leads me to the anchor link.
cancel the click with preventDefault
$("#firs").on("click", function (e) { e.preventDefault(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com" >
<div id="firs">X</div>
<div id="second">Y</div>
</a>
Either dont't put the div in the anchor, or use the following:
document.getElementById('firs').addEventListener('click', function(event) {
event.preventDefault();
});
I think that this might help (your id says firs but sake of spelling I'll put first)
$("#first *").attr("disabled", "disabled").off('click');
use the following
event.preventDefault()
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.