$("button").click(function (){
$("<button>Start</button>).appendTo('main');
});
This is my code, Now when I click a button it creates another button. But when I click it again, another button is added. I want to stop adding multiple buttons.
Please add class. You're using a generic selector. So it is the right expected behaviour. Maybe a class like .clicker something like that might work.
$("button.clicker").click(function() {
// Also you're missing a " after </button>
$("<button>Start</button>").appendTo('main');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<button class="clicker">Click Me</button>
</main>
Related
I have a link:
<ul id="titleee" class="gallery">
<li>
Talent
</li>
</ul>
and I am trying to trigger it by using:
$(document).ready(function() {
$('#titleee').find('a').trigger('click');
});
But it doesn't work.
I've also tried: $('#titleee a').trigger('click');
Edit:
I actually need to trigger whatever get's called here <a href="#inline" rel="prettyPhoto">
If you are trying to trigger an event on the anchor, then the code you have will work I recreated your example in jsfiddle with an added eventHandler so you can see that it works:
$(document).on("click", "a", function(){
$(this).text("It works!");
});
$(document).ready(function(){
$("a").trigger("click");
});
Are you trying to cause the user to navigate to a certain point on the webpage by clicking the anchor, or are you trying to trigger events bound to it? Maybe you haven't actually bound the click event successfully to the event?
Also this:
$('#titleee').find('a').trigger('click');
is the equivalent of this:
$('#titleee a').trigger('click');
No need to call find. :)
Sorry, but the event handler is really not needed. What you do need is another element within the tag to click on.
<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>
Jquery:
$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works
This is all about what you are clicking and it is not the tag but the thing within it. Unfortunately, bare text does not seem to be recognised by JQuery, but it is by vanilla javascript:
document.getElementById('test1').click(); // Works!
Or by accessing the jQuery object as an array
$('#test1')[0].click(); // Works too!!!
Since this question is ranked #1 in Google for "triggering a click on an <a> element" and no answer actually mentions how you do that, this is how you do it:
$('#titleee a')[0].click();
Explanation: you trigger a click on the underlying html-element, not the jQuery-object.
You're welcome googlers :)
If you are trying to trigger an event on the anchor, then the code you have will work.
$(document).ready(function() {
$('a#titleee').trigger('click');
});
OR
$(document).ready(function() {
$('#titleee li a[href="#inline"]').click();
});
OR
$(document).ready(function() {
$('ul#titleee li a[href="#inline"]').click();
});
With the code you provided, you cannot expect anything to happen. I second #mashappslabs : first add an event handler :
$("selector").click(function() {
console.log("element was clicked"); // or alert("click");
});
then trigger your event :
$("selector").click(); //or
$("selector").trigger("click");
and you should see the message in your console.
Well you have to setup the click event first then you can trigger it and see what happens:
//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
evt.preventDefault();
alert($(this).attr('href'));
});
// now the manual trigger
$myLink.trigger('click');
This is the demo how to trigger event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
</body>
</html>
This doesn't exactly answer your question, but will get you the same result with less headache.
I always have my click events call methods that contain all the logic I would like to execute. So that I can just call the method directly if I want to perform the action without an actual click.
For links this should work:
eval($(selector).attr('href'));
You should call the element's native .click() method or use the createEvent API.
For more info, please visit: https://learn.jquery.com/events/triggering-event-handlers/
We can do it in many ways...
CASE - 1
We can use trigger like this : $("#myID").trigger("click");
CASE - 2
We can use click() function like this : $("#myID").click();
CASE - 3
If we want to write function on programmatically click then..
$("#myID").click(function() {
console.log("Clicked");
// Do here whatever you want
});
CASE - 4
// Triggering a native browser event using the simulate plugin
$("#myID").simulate( "click" );
Also you can refer this : https://learn.jquery.com/events/triggering-event-handlers/
Shortest answer:
$('#titlee a').click();
I have a simple form that, in jsfiddle I've simplified even further:
https://jsfiddle.net/mvw1nt5L/
Basically I have a table with just a header row. Above it I have an "Add" button which each time it gets clicked is supposed to add a row to the table.
my button element is ...
<button id="addMeeting" type="button" onclick="addMeeting();" > Add A Meeting </button>
and the associated JS function is simply
function addMeeting() {
alert("add button clicked");
return false;
}
Real, real simple! But it doesn't work.
the JS code is contained directly in the html document as a script tag.
What am I doing wrong?
TIA for any help!
Gus
It is a conflict between an element ID on your form and the function name. Or maybe not so much a conflict as a scoping issue. I've honestly never encountered this before until I tried to solve your problem. Very strange. Here's a more detailed explanation:
Why JS function name conflicts with element ID?
it seems it's a loading and scope issue. If you place a script tag before the html it will work just fine:
<script>
function addMeeting() {
alert("add button clicked");
return false;
}
</script>
<button id="addMeeting" type="button" onclick="addMeeting()"> Add A Meeting </button>
alternatively you can also explicit use the window object:
window.addMeeting = function() {
alert("add button clicked");
return false;
}
and:
<button id="addMeeting5" type="button" onclick="window.addMeeting();"> Add A Meeting </button>
I would like to run some code in the Chrome console so that a button would be clicked. I done a bit of research on how to do this, but all the results I found achieved this by using the button's id. However, I can't find the ID of this button and I don't think it has one.
Here is the source code (the button is highlighted)
Please click here
All help is appreciated.
Thanks.
You can click the button using class btn-play
1. javascript example
var elem = document.getElementsByClassName("btn-play")[0];
elem.addEventListener("click",function(){
alert("clicked");
},false);
2. Jquery example
$(".btn-play").click(function(){
alert("clicked");
});
if you want to trigger click on the button then use below
$(".btn-play").trigger("click");
Your parent div with the id 'maincard' can be used with jquery to select that button. look at the example below. Using nth-child you can select which button you want to use. Currently it is selecting the last button from the image.
$("#maincard button:nth-child(2)").on("click", function() {
//Do Stuff here
});
Hope that helps!
you can try to find your button:
$("#maincard").find(".uk-button.uk-button-default.btn-play.uk-button-large.uk-width-small");
You can click a button using class name.
Example:
<input type="button" class="btnClass" value="Click Me" />
$('.btnClass').click(function(){
alert('Clicked');
});
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.
I have two buttons and I need one to stay disabled until the other is active. And then I need that same button to become inactive and go back to a previous class if the first button is clicked/toggled again. I only have have access up to jQuery 1.7.2:
<button class="primaryClass" value="primary"></button>
<button class="linkClass" value="link"></button>
Thus far I tried this but it does not seem to be working:
$('.linkClass').on('click touchend',function() {
if($(this).hasClass('linkClass')) {
$(this).prev('.primaryClass').addClass('disabled');
e.preventDefault;
}
if($(this).hasClass('linkClass-active')) {
$(this).prev('.primaryClass').removeClass('disabled');
});
So basically, the user clicks the button with linkClass the button with primary class becomes enabled because the disabled class is removed. If the user clicks it again, then the primaryClass button again becomes disabled. Any ideas what I am doing wrong?
Your question is fairly vague, please try to make a fiddle. As far as I can tell you should be setting .prop("disabled", true); to make the button disabled. If you don't have a css .disabled class, you won't see it, that and you should always use built in functionality.
Instead of adding the class you can disable the button using the disabled property. This will prevent clicks on the button from firing any event handlers.
$('.linkClass').on('click touchend',function() {
var primary = $("button.primaryClass");
primary.prop("disabled", !primary.is(":disabled"));
});
JS Fiddle: http://jsfiddle.net/6SNQS/2/
use toggleClass
http://api.jquery.com/toggleclass/
$('.linkClass').on('click touchend',function() {
$(this).prev('.primaryClass').toggleClass('disabled');
e.preventDefault;
});
The part with 'linkClass-active' I don't understand so I left that out.
If you want to also toggle the disabled property use this:
$('.linkClass').on('click touchend',function() {
var $target = $(this).prev('.primaryClass');
$target.toggleClass('disabled');
$target[0].disabled = !$target[0].disabled;
e.preventDefault;
});
fiddle: http://jsfiddle.net/Yyk2G/
By the way, why are you setting value? its not an input its a button tag.
You mean like this DEMO:
html
<button class="primaryClass" disabled="disabled" value="primary">Bye</button>
<button class="linkClass" value="link">Hi</button>
js
$('.linkClass').on('click touchend',function() {
$(this).prev().prop('disabled', function(idx, oldAttr) {
return !oldAttr;
});
});
jQuery attr() takes a callback. So you can use that to your advantage.