I know this question has been asked many times before and there are countless answers for it but the issue that I have is that I have no idea why I cannot autoclick a link on page load!
I have used the same process over 20 times before without any issue but now it doesn't work...
Here is a fiddle with the issue: https://jsfiddle.net/1xy0f291/
and this is my code:
$(document).ready(function(){
alert('hello');
$('#pop').trigger('click');
$('#pop').click();
});
anyone has any idea why this is happening?
Basically $().click() will invoke the click event handler bound with it. Not the natural click.
For invoking the natural click you have to access the plain node object and call its click() function,
$('#pop')[0].click();
DEMO
try this :
document.getElementById('pop').click()
updated fiddle : Fiddle
Add some small code fix, use eq():
$('#pop').click(); -> $('#pop').eq(0).click();
$('#pop').trigger('click'); -> $('#pop').eq(0).trigger('click');
try this document.getElementById('pop').click()
Related
I'm trying to use jquery to trigger (click) a button on a logon page. Standard javascript works:
document.getElementById('loginButton').click();
However, when using jquery like this nothing happens.
$("#loginButton").click();
I've tested that jquery is working and can find the loginButton using this.
console.log($("#loginButton").length) which returns a 1.
$("loginbutton").trigger("click");
You need to call that click function:
$( "#target" ).click();
OK So this was what I needed to do for jquery to work.
$("#loginButton")[0].click();
Strange because document.getElementById('loginButton').click() worked fine as it was. Can anyone explain why this might be ?
I am building something with Jquery, and I am making some Ajax calls. So after my ajax calls, I need to call functions to trace clicks on some elements again. Here an example of such a function:
$(document).ready(function () {
initSomething();
});
function initSomething(){
$('.something').click(function(){
alert('hello');
});
}
And now an ajax function:
$('#AddSomething').click(function(){
$.post('somewhere.php',{data},function(data){
initSomething();
});
});
And the problem is: I feel like when I initSomething(); for the second time, it's like it's readding a click event on the elements already traced by the first initSomething called on document ready.
So I tried something like e.preventDefault and e.preventPropagation(), but it doesn't seem to work, what am I missing?
Thanks for your answers and have a nice day!
EDIT: As saw on the answers, I forgot to say that the Ajax call is inserting new .something elements in the DOM...
EDIT 2: Here a jsfiddle: https://jsfiddle.net/wpsnz7op/
Try .off() api to remove the already attached event and reassign the event like following.
function initSomething(){
$('.something').off('click').click(function(){
alert('hello');
});
}
Hope this helps....
There is no need to rebind clicks from what I can see of the code you have there.
Just do not rebind and you will not have a multiple click issue.
Use event delegation instead of that.
$(document).on('click','.something',function(){
alert('hello');
});
Then there is no need for calling the initSomething(); function after ajax.
It seems that this code:
$(function(){
$('.show_hide_login').toggle(
function (){
alert('show');
$("div#fullpage").show();
$("div#loginbox").show();
},
function (){
alert('hide');
$("div#loginbox").hide();
$("div#fullpage").hide();
}
); });
Any idea on why it would be running twice when I click on either link (two, one is a div and one is an anchor)?
How many elements do you have with the .show_hide_login class? I'll guess you have two of those. In which case, $('.show_hide_login') result contains two elements, and toggle() is executed for each of them.
This isn't an answer to your question, but you could clean up your code a bit like so:
$(function() {
$('.show_hide_login').toggle(
function() {
alert('show');
$("#loginbox,#fullpage").show();
}, function() {
alert('hide');
$("#loginbox,#fullpage").hide();
});
});
As to your actual problem, I suspect Nick's guessed the culprit. Check out this demo to see the result of binding the same event twice: http://jsfiddle.net/9jPLv/
In addition to adding an alert prior to the binding of the toggle event, you could add in an unbind() and see if that solves the problem, like so:
$('.show_hide_login').unbind().toggle(
If that solves it, the toggle binding is definitely being run twice, so you'd just have to figure out why.
my answer is just a kind of checkpoint,i had the same issue but for different reason. I did include the script file in base page as well as child page. this resulted in toggle running twice if you have this problem check that the script is added only once.
It might be the same issue i was having.
so if you got an element with a script tag in it - then you move that containing element or wrap it with another tag in jquery - then the ready function in jquery is executed again - thus binding a second toggle function to your element.
as suggested $('.show_hide_login').unbind().toggle( is a workaround that does work, but better to try moving your javascript code to the head or bottom of the page.
I have a problem, I'm using .live() to bind mouseenter like this:
$('a').live('mouseenter',function(e){
alert($(this).attr('title'));
});
For all my links I get an alert for the first link's title, I think the problem is from $(this) but I'm not sure, can anyone help?
I don't think the code you posted is what's actually running, it works :) You can test it here: http://jsfiddle.net/YyMDg/
See what the difference is in your actual code, are you looping somewhere for example, and $(this) isn't being evaluated in the handler but somewhere outside of it?
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.