Develop Reference

Triggering button click in jQuery not working

Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.

We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();

While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here

The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt

You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');

try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/

Click on element via Javascript console

Imagine there is an element #button1 on website which is watched by jQuery:
$('#button1').click(function(){
console.log("you clicked");
};
So how do I click this #button1 element via JavaScript console? Is there a command like click("#button1")? Thanks.

You can trigger click functio like bellow
Using JQuery
$('#button1').click()
using simple JS
document.getElementById('button1').click();

You can trigger a click by omitting the callback function:
$('#button1').click();

You can not click, but simulate or trigger click. Please refer Creating and triggering events

You can achieve this without jQuery:
document.getElementById("button1").click(); // clicks the button

You can also use this apart from the answers mentioned already:
$( "#button1" ).trigger( "click" );

jQuery won't trigger click event

I'm trying to use jQuery to simulate a click on an "Add Row" link. I want to trigger the javascript function attached to the link.
The function that adds the row is in a separate file, so I can't call it directly. (Specifically, it starts on line 57 of Django's admin inline.js file.) I guess my only other option is to trigger a click event on the link.
However, I tried to do this with:
$("tr.add-row a").trigger('click');
To no avail. It doesn't trigger the click event.
How can I get jQuery to click the link? (Or, ultimately, how can I add a row?)
Thanks in advance!

I found the problem: Django's jQuery was namespaced in django.jQuery, not the standard jQuery or $.
I had to write
var jQuery = django.jQuery;
var $ = django.jQuery;
in front of my script, and now it works.

Trigger("click") should work, you can also try like this:
$("tr.add-row a").click();
http://api.jquery.com/click/
Most likely $("tr.add-row a") doesn't find anything.

Is jQuery 1.3.2 causing this not to work, or something else?

I know that this is supposed to work, it works fine in 1.7.2
//click anywhere to close dropdown
$("html").live("click", function () {
closeDropdown();
});
//on click of ellipsis, open dropdown
$("span.PivotEllipsis").click(function (e) {
e.stopPropagation();
openDropdown();
});
It is the classic click outside span.PivotEllipsis to hide. However, the problem is that the second function is not working. The first is working fine, when you click outside, it hides. However, when you click on the span.Pivot Ellipsis it doesn't pop up, instead I think, hard to tell though, that it runs openDropdown() and then immediately after closeDropdown()....
Anyone know what it wrong?

According to jQuery Documentation: "it is not possible to stop propagation of live events." You don't really need to use .live() as the html element exists at document.ready and isn't dynamically loaded

What you thought is probably correct - you need to disable the first function while the dropdown menu is not open.

JQuery .click() event troubles

Here's a snippet of my code:
$(".item").click(function () {
alert("clicked!");
});
And I have (hypothetically; in actuality it's far more complicated) the following on my page:
<img src="1.jpg" />
However, when I click the image, I do not get an alert.
What is my mistake?

Is your selector actually matching anything? Try using the jQuery debug plugin (http://jquery.glyphix.com/) and doing this:
$(".item").debug().click(function() {
alert("clicked!");
});
.debug() will log whatever is matched to the Firebug console (you are using firebug, right? :-) ) without "breaking the chain" so you can use it inline like this.
If that turns out correctly, there may be some issue with the browser navigating to "#" before it can show your alert. Try using the .preventDefault() method on the event object to prevent this behavior:
$(".item").click(function(evt) {
evt.preventDefault();
alert("clicked!");
});

First question - are you adding the element to be clicked dynamically? If it is,
you should use the live event since that will take care dynamically created elements.
http://docs.jquery.com/Events/live#typefn

Use bind.
$(".item").bind("click", function(e) { ... });

modifying the selector?
$(".item > img")

I had this problem recently after adding a context menu jquery plugin. The pluging was binding to the click event of the body and then unbinding click event - it seemed to remove all bindings to click event for all elements. Maybe a suggestion to turn off plugins or check you're not unbinding click for a parent element yourself.

The code you have posted is correct, so I suspect there's something else going on that you haven't considered.
Firstly, if there was an error somewhere (even not in that exact bit of code) that might cause it to stop working. Put an alert just after this line to check that it runs.
Check that no other elements are catching the event and stopping it from propagating. This has bitten me before in the past... If there's anything else handling a click which has stopPropagation() or return false in it, that might be the problem.

One thing I've found (though only with links going elsewhere) is that adding return false; in may help, if it's just firing the anchor off instead of evaluating the alert. I can't really say why this would be the case, but that's a solution I found to a similar problem recently.