I am trying to programmatically trigger a click on a wordpress page on a <a href="#"... tag which after clicked shows a div with all categories... (the div is not hidden it gets created after clicking the button)
When trying to find the click event behind this element on chrome debugger DOM in event listeners the only event attached
to this element is flatsome.js?ver=3.12.1:109
the handler is f(t) ............
using jQuery Audit, I can see the handler definition, then there are many functions like !function(t)... because it is minified.
I tried to use jQuery click, mouseup, mousedown events (also with trigger('click...') ) with no success, it gets the object, doesn't show an error, but never shows the filter menu.
Is there a way to just emulate the physical click as if it was done with the mouse? then I wouldn't need to call the function, I can't seem to find what function is behind the click event...
Thank you in advance
Dario
Have you tried the following code?
Using jQuery:
$('your-query-selector').trigger('click');
Using JavaScript:
document.querySelector('your-query-selector').click();
Related
I am using the autocomplete js from here:
https://goodies.pixabay.com/javascript/auto-complete/demo.html
It all works fine but when I click one of the suggestions
A click event fires on the body element which then shuts down the whole drop down menu.
(this is by design as in every other case where there body is genuinely clicked I want the drop down menu to disappear)
When I check the event that is firing on the body the path is showing that it is starting at the body element. I have put event stop propogation functions on all of the divs created in the drop down menue including the ones created by the autocomplete. It doesn't seem to be coming from them - it is if it the click is firing the click event of the suggestions divs but additionally of body underneath as an entirely separate click event.
How can I stop this from happening?
Many thanks.
SOLUTION:
The autocomplete javascript code from pixabay was capturing the mousedown event - and then setting the display of the suggestions to none. This meant that when the click event fired the suggestion div was no longer there causing it to fire a click on whatever was underneath the click. So I changed the mousedown event in the autocomplete code to click and this has fixed the problem.
This seems like a bug in their code? I can't see a reason why you'd ever want the click event to be fired on what happens to be underneath a suggestion?
I have created a codesandbox to demonstrate the problem:
https://codesandbox.io/s/cocky-wu-mibxl
For some reason the onClick event handler on the link that comes after the dropdown, is not triggered while the dropdown is open and I have no idea why. I hope you can help me out here.
mousedown event happens a lot before the click / mouseup usually (>50ms) and in this case the dom has changed and the element that you clicked is not in the place where you started the clicking (mousedown) and does not receive the click event. You could add a timeout to the useOnClickOutside cb call but that is very unreliable.
Javascript is a single threaded language. So to get the <Dropdown> list to close, you need to close the alert() box first. The closest you will get is the work around in the comments, or you can change the action of clicking the link to OnMouseUp rather than OnClick. Either way, you will still need to close the alert box for execution to continue.
I'm trying to programmatically click the "listen" button on a Google Translate page (https://translate.google.com/#en/es/javascript)
For some reason this code does not produce a sound:
document.getElementById('gt-src-listen').click()
while actual clicking on the button does.
Why these two are not identical and how can I programmatically emulate a click in this case?
If you are using vanilla javascript I think the event you are trying to use is onclick, You can see the difference between the both of them in this SO answer What's the difference between "click" and "onclick" when creating an element with jQuery?
I want use Chrome developer tool to add a break point to js function to debug it.
For example, a function "buttonAlert()" is binded to a button.
But I don't know where the code of such function, and I don't know where the code that bind the function to button.
So, how can I use the tool to find out the location of function and binding code?
It is actually possible to see event listeners in chrome.
Go to the elements panel, select the element in question and click on Event Listeners on the right side.
Sadly most of the time when jQuery is in use, you only see the part of the source of jQuery that bound the event, not the one that called jQuery.
I am creating a browser extension that modifies the Twitter timeline by adding some links to each tweet row in a user's Twitter timeline.
Generally whenever the tweet row is clicked, Twitter will pop out the right-hand panel with more information, except for when the user clicks links like Retweet, Reply, etc. I'm not sure what Twitter's JavaScript is applying to these links to prevent them from causing the panel to be opened, but I'd like to do something similar. I have tried inspecting the elements in Google Chrome, but the event handlers are not revealed.
Any suggestions?
The event handlers are probably being added programmatically via script. You could try to remove the event handlers (see the docs), but it might be easier to clone the element in question, then hide the original. See cloneNode documentation for information.
Without any sample html, I can't really give you a good example, but here's a generic jsFiddle I threw together to demonstrate the concept: http://jsfiddle.net/sacCK/1/
I solved my problem by stopping the event propagation. This prevented the event from propagating to the event handler for the container element.
With jQuery I was able to apply an onclick handler like so:
$("#elementId").click(function(event) {
event.preventDefault();
event.stopPropagation();
// other actions
});