Here is the DOM :
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save device</button>
</div>
I want to use Jquery to select the button and click on it?
I tried using : jQuery(".btn btn-primary").click()
which is not working
You are trying to select an element with both classes, therefore your selector should be .btn.btn-primary.
$('.btn.btn-primary').click();
You were trying to select a element with class .btn-primary that was a descendant of a .btn element.
Your selector is incorrect; because both classes are on the same element you need to separate them by . with no spaces:
jQuery(".btn.btn-primary").click()
You could use the jQuery trigger() method to trigger the behaviour of an existing event handler.
https://api.jquery.com/trigger/
example:
<button id='testButton'>Test</button>
<script>
$(function(){
$('#testButton').on('click' , function(){
alert("I've been clicked!");
});
//now on another event, in this case window resize, you could trigger
//the behaviour of clicking the testButton?
$( window ).resize(function() {
$('#testButton').trigger( "click" );
});
});
</script>
See the following:
https://api.jquery.com/trigger/
Use $(".btn-primary").trigger("click");
Hope that helps
Just incase you did not learn yet, you can always define an Id for the button and use it this way:
<div class="form-actions">
<button id="mybutton" class="btn btn-primary" type="submit">Save device</button>
</div>
$('#mybutton').click(function(){
//your code goes here
});
$( window ).load(function() {
$(".btn-primary").trigger('click');
});
Related
I have a button like this
<button data-cart-itemid="1be8718a-6993-4036-b7c6-8579e342675d" data-action="inc">
When I click on the document I need to check whether it clicked on that button. I need to check it using the attribute data-action="inc"
I tried this code, but it always gives me false
document.addEventListener('click', (e)=>{
console.log(e.target.closest('button').hasAttribute("[data-action='inc']"));
});
To expand my last comment, you could do something like this
<body>
<button data-cart-itemid="1be8718a-6993-4036-b7c6-8579e342675d" data-action="inc">
<img src="https://www.webfx.com/wp-content/themes/fx/assets/img/footer/footer-roket.png">click it</span>
</button>
</body>
document.addEventListener('click', (e)=>{
console.log(e.target.activeElement)
});
https://jsbin.com/yifulebate/edit?html,js,console,output
I want to call ng-click function using console. Is it possible?
<button class="btn btn-sm btn-block btn-green ng-binding" id="login-button"ng-click="onLoginClick($event)">Log In</button>
You can try this:
angular.element('#login-button').triggerHandler('click');
this will work for sure.
You can use javascript getelementbyid as following:
document.getElementById("login-button").click();
The only way it comes to my mind to do it is using jQuery to select the element (button) and then trigger the click:
$( "#login-button" ).trigger( "click" );
Try it and let us know if it works, here you are a JSFiddle: link
Yes. You can invoke/execute a function using window.function_name() or function_name()
I have a script that enables the disabled text box when clicking on a button. But, I just don't know how to re-disable the text box again.
The coding is below.
HTML:
<div class="input-group">
<label for="some-tbox" class="input-group-addon">Label:</label>
<input id="some-tbox" type="text" class="input-box" value="some value" disabled>
<span class="input-group-btn">
<button class="enable" type="button">button</button>
</span>
</div>
JS:
$(".enable").click(function(){
$(this).parent().parent().children(".input-box").removeAttr("disabled");
$(this).toggleClass("disable");
$(this).toggleClass("enable");
});
$(".disable").click(function(){
$(this).toggleClass("enable");
$(this).toggleClass("disable");
$(this).parent().parent().children(".input-box").attr("disabled", "disabled");
});
And I have made a fiddle out of it. But, It's not working. Here is the link.
Instead of messing with adding and removing classes, just toggle the disabled property with:
$(".enable").click(function() {
$(this).closest('.input-group').find('input').prop('disabled', !$(this).closest('.input-group').find('input').prop('disabled'))
});
jsFiddle example
The problem is this line $(".disable").click(function(){ ...})
You are binding a click event handler to a class named disabled which was not available initially during page load, it appears dynamically later.
You need to delegate the event handler to some parent which always exist and then handle the event there, in this case you can do this:
$(".input-group").on('click', '.disable', function(){
$(this).toggleClass("enable");
$(this).toggleClass("disable");
$(this).parent().parent().children(".input-box").attr("disabled", "disabled");
});
jQuery's on function
You cann't bind an element ".disable" that don't exist , In that case you can rebind it when you changed it's class. Code behind may help you:
$(".enable").on("click",enabledClick)
function enabledClick (argument) {
$(".enable").parent().parent().children(".input-box").removeAttr("disabled");
$(".enable").toggleClass("disable");
$(".enable").toggleClass("enable");
$(".disable").on("click",disabledClick)
}
function disabledClick (argument) {
$(".disable").parent().parent().children(".input-box").attr("disabled", "");
$(".disable").toggleClass("enable");
$(".disable").toggleClass("disable");
$(".enable").on("click",enabledClick)
}
I have 50 dynamically generated HTML buttons as follows:
<input type="button" id="btn1" name="myButton" value="Click Me" />
<input type="button" id="btn2" name="myButton" value="Click Me" />
:
:
:
<input type="button" id="btn50" name="myButton" value="Click Me" />
Which is the best way to assign click event to all buttons using jQuery?
By using id or by using name attribute ?
Event listeners cost memory. You have to think carefully about how you should implement the listeners.
1. The straightforward way:
Do not use this
If the behaviour for each button is the same, use a class:
$(".btn").click(function() {
// Do something
});
If behaviour for each button is different, assign events to different #IDs
$("#btn1").click(function {
// Do something
});
2. Use .on():
jQuery 1.7 introduced .on() method that wraps all listeners to 1 method.
$("button").on("click", function() {
// Do something
});
However, we are still binding many listeners on the page.
3. Use a wrapper (use this!):
Wrap your buttons with a div and create one listener for it.
$("#wrapper").on("click", "button", function() {
// Do something
});
Useful resources:
Performance comparison
.on()
Best way would be to delegate to the surrounding container, that way you only have one listener rather than 50. Use .on()
https://api.jquery.com/on/
If you must assign to each button, figure out a way to write only one selector, like this:
$('button').click(function(){});
Note your selector may need to be more specific to target just these 50 buttons, as #Drewness points out in the comments.
if you have all the buttons inside of a container and you want the same function for all add the click handler to the container
DEMO
$("#container").on("click", function(e){
if(e.target.type =="button")
{
alert(e.target.id);
}
});
<div id="container">
<input type="button" id="test1" value="button1"/>
<input type="button" id="test2" value="button2"/>
<input type="button" id="test3" value="button3"/>
<input type="button" id="test4" value="button4"/>
<input type="button" id="test5" value="button5"/>
<input type="button" id="test6" value="button6"/>
something
<input type="text"/>
</div>
This would be an easy way to wrap it all up into one 'on' event and do something based on the button id;
<button id='button1'>button 1</button>
<button id='button2'>button 2</button>
<button id='button3'>button 3</button>
var mybuttons = $('#button1');
for(i=1;i<3;i++){
mybuttons = mybuttons.add($('#button'+i));
}
console.log(mybuttons);
mybuttons.on('click', function(){
var myid = $(this).attr("id");
console.log(myid);
//use a switch or do whatever you want with the button based on the id;
});
here's a fiddle http://jsfiddle.net/gisheri/CW474/1/
I would apply it to the parent element of the buttons. So if all of the buttons were in <div id="myButtons">:
$('#myButtons').on('click', 'button' function () {
// Do stuff...
});
The key is to be specific enough that you do not have to specify each selector but not too lose as there may be other buttons, etc. on the page that you do not want to include.
Updated code to include delegation.
I think it will be better if you use a common class name for all and handle click event by that class name.
$('.classname').click(function(){
//`enter code here`
});
Or you can handle event by tag name:
$('button').click(function(){
//'enter code here'
});
This method might effect the function of other buttons which are not included in the group of 50 buttons.
Try
$(".btn").click(function() {
// Do something
});
You can use following code:
$("#btn1").on("click",function(){
// Your code
});
$("#btn2").on("click",function(){
// Your code
});
and so on...
I have this HTML which looks like this:
<input type="submit" name="savebutton" class="first button" />
<input type="submit" name="savebutton" class="second button" />
and JS:
jQuery("input.second").click(function(){
// trigger second button ?
return false;
});
So how can I trigger the click event from the 2nd button by clicking on the first one?
Note that I don't have any control over the 2nd button, neither on the html or the click event on it...
Add id's to both inputs, id="first" and id="second"
//trigger second button
$("#second").click()
Well, you just fire the desired click event:
$(".first").click(function(){
$(".second").click();
return false;
});
jQuery("input.first").click(function(){
jQuery("input.second").trigger("click");
return false;
});
You mean this:
jQuery("input.first").click(function(){
jQuery("input.second").trigger('click');
return false;
});
By using JavaScript: document.getElementById("myBtn").click();
this works fine, but file name does not display anymore.
$(document).ready(function(){ $("img.attach2").click(function(){ $("input.attach1").click(); return false; }); });
If it does not work by using the click() method like suggested in the accepted answer, then you can try this:
//trigger second button
$("#second").mousedown();
$("#second").mouseup();