The CMS I'm using (Invision Power Board) has nifty Sign In links that when clicked open a dialog instead of changing the page. I found an example of how to create such a link:
...
The problem is, every time the mouse is moved over the link, the click handler is added. So if I move my mouse over the link ten times and then click it, the Sign In dialog comes up ten times.
I tried changing it to:
...
But that doesn't work. There aren't any errors in the console, but nothing happens when the link is clicked.
I was able to get this working, but it required some non-inline code:
<script type="text/javascript">jQuery("a.signIn").on("click", ipb.global.inlineSignin);</script>
But that's a problem, because I may have sign in links on different sections of pages (that are generated independently) and if I have the above snippet more than once, then I'm back to the same problem.
Is there any way to make this click handler work using only inline code?
You need to invoke the method
...
Related
I am attempting to write a script to automate some tasks on a third party site. The very first step is simply clicking a div on the nav, but document.getElementById('myId').click() does nothing.
In my searching I found this answer that fully simulates a mouse click: Simulating a mousedown, click, mouseup sequence in Tampermonkey?
However, that also does not work. I did notice that there's a class added when hovering, and the script successfully simulates that. And obviously physically clicking works fine. I'm not sure what else I could be missing
Edit: It turns out that the clicking was just fine, but the site is actually checking pieces of the event such as the coordinates, which is why it appeared to not be functioning properly
If I understand correctly, what you want is this:
document.getElementById('myId').addEventListener('click', myFunction);
This will run the function myFunction() when the element with the ID of "#myId" is clicked.
Hope this helps!
P.S. If this doesn't work, I suggest using Shashank Bhatt's suggestion of checking pointer-events.
I made some brackets for a tournament and I'm using Owl carousel to serve videos on each clicked match.
The problem I've been trying to solve is this: Create a link after each click on a match, have this link clicked (by itself) which will, in turn, activate a certain slide in the carousel. Unfortunately that's the only way this could be made to work, because the Owl carousel needs links for callbacks. It's something like in this fiddle: http://jsfiddle.net/EwFMn/9/ except that in my example I have the brackets loaded below.
Now (after searching for a solution and trying every method suggested here in other questions on SO) I couldn't find a way to get a link which was appended to a div to be clicked too immediately after being created. What I get is this: on clicking a match, a link is created which needs to be clicked separately to get the behaviour I described above.
I have tried all the methods which use
on('click', selector-to-your-element , function() { ... });
as well as simply:
$('.something').click();
as well as other methods using live and delegate. None of the solutions proposed on other similar questions on SO worked. It seems as if at the time when the click event is triggered jQuery doesn't find the link it has just created to click it, so the link only works after you click it manualy.
The problem is I need this to not only work on one single click but also I need this link to get destroyed after it automatically gets clicked. I'm not even sure this is possible with jQuery. I'm curious if anyone has a working solution for this.
You can't trigger the href with a javascript click event. You need to do something like this:
$('.button').on('click',function(){
location.href=$(this).attr('href');
});
$("[href=#seven]").trigger('click');
I have a pretty complex system with a few AJAX calls which render different templates into other templates in PHP.
One of these templates is a edit form for my entity. This form is rendered hidden into my website until a button was clicked, which will then fire a jQuery toggle() to switch out a part of my site for this edit form.
This works fine until the user is using the jQuery UI slider on my site.
What happens if the user navigates within the slider is that parts of my site will be reloaded with AJAX.
When the button for the toggle() then will be clicked the animation goes of as often as the slider was used (so if the slider was used 4 times the toggle will animate an switch out the 2 elements 4 times).
I debugged through it and couldn't find the mistake, i can't provide a jsFiddle which could rebuild the situation nor can i give access to the site. The click function will be fired only once, so i really can't explain why this is happening.
To mention is that i have 3 buttons which will trigger this event:
#poi_edit_ajax will be shown when the slider was used in the template which will be rendered per AJAX.
#poi_edit_first will be shown by first access to the site and nothing has been reloaded per AJAX.
#poi_edit_last will be shown so the user can come back from the edit view
The Javascript is the following:
$("#poi_edit_ajax").click(function(){
$(".toggle_edit").toggle('slow');
});
$("#poi_edit_first").click(function(){
$(".toggle_edit").toggle('slow');
});
$("#poi_edit_last").click(function(){
$(".toggle_edit").toggle('slow');
});
I don't think that somebody can give me a solution with just this information, but that's everything i can provide now, so my Question now is simply if it is possible to tell the toggle() function from jQuery to only run the animation ONCE PER CLICK.
I don't think that jQuery one() can be used for this, because so the click event could only be used once per pagevisit.
EDIT
According to the comment, i tried out if multiple event handlers will be registered within the AJAX calls, which is true.
The code to fix this is simple:
$("#comment_first").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
$("#comment_last").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
$("#comment_ajax").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
I just need to unbind the Lister before bind it again, else they're gonna stuck and multiple Listeners will react to the click event!
You are probably binding the Click event multiple times (by loading javascript through the AJAX calls). Make sure you bind the Click handler (which triggers the toggle()) only once.
Take a look at this answer: https://stackoverflow.com/a/969011
A (slightly modified) quote from that answer, for quick reference:
function alertEvent() { alert("test"); }
$(".ajax").bind("click", alertEvent);
//When you want to ensure it won't happen twice...
$(".ajax").unbind("click", alertEvent);
$(".ajax").bind("click", alertEvent);
This method will only remove the event you specify
Yesterday, I visited a forum. There was like and Dislike button under the each post. When I click the Like button, the Like was counted without any page reload. Meaning Ajax was working, but when I check the href of that like link that was like this:
<img src="dbtech/thanks/images/likes.png" alt="Likes" title="Likes"> Like
I have also checked (using Visual Event) that there is no event listener attached to that link. So, I cant understand that how it works. Can some one explain?
javascript: return 0;
Does the same thing.
This would just uselessly create a random regular expression literal and then discard it. It is probably some programmer's ignorance.
This is included because an a tag has to have an href.
On its own, a link with href="javascript://" does nothing at all when clicked. This is as opposed to a link with href="#", which will set the anchor of the current location to #, or a blank or unset href, which will cause navigation to the current page.
In this case, since there's no explicit onclick handler and no event handler attached to this link, there must be some a event handler at a higher level that's catching click events as they bubble up to the page. Without being able to see the site, it's impossible to say for sure how it's working, but my guess would be that the data-button="likes" attribute is involved here.
I've been staring at this one for a while and I'm completely stumped. You'll need firebug for this, take a look at the AJAX requests. They seem to be multiplying after each click of next and previous until it's too slow to load entirely:
http://www.ftsdev.com/freegreen/virtual-tour-prototype/virtual-tour.html
All the JavaScript source for this is in:
/freegreen/virtual-tour-prototype/js/virtual-tour.js
Functions to look at:
launchVirtualTour()
$('#vt-next').one('click',function()
$('#vt-prev').one('click',function()
When ajaxComplete() is called I check the file that loaded against an Array outside of the callback function. This allows me to determine whether or not it's the first or last element in the series so that I can hide the Previous or Next buttons accordingly. I have a feeling that the problems lies somewhere in lines 80-82 where I add 1 to the inArray() value stored in indexInArray.
I've searched around but can't find any similar situations out there, any help is much appreciated.
Thanks!
I briefly tried out the page. From a quick skim of the code and my gut reaction, it looks like you aren't unbinding previously bound click events. As far as I can tell this is the flow to your bug:
User clicks to bring up a slide show
You bind next/prev click events
User clicks around, using the next/prev buttons
User clicks out of the current slide show
User clicks into another slide show
You bind next/prev click events
User clicks around, using the next/prev buttons, causing content to be called twice
You need to unbind the click events when the user clicks out of the first slide show. Or don't bind in step 6.