I want to trigger a click event on a span but it's not working. I tried both of the following:
$('#my_span').click();
$('#my_span').trigger("click");
But then I tried:
$('#my_span').focus();
And this worked! Anybody know why? I am not trying to bind a handler, just trying to trigger the click event like an user clicking on that span. Please help.
Try triggering click on the DOM element instead of on the jQuery collection of the element:
$('#my_span')[0].click();
Or:
document.getElementById('my_span').click();
Does your span hold any information? Is is a 0px by 0px element? If that's the case the click will never be triggered.
For instance, if you look at a font-awesome icon inside a <span> or <i> it will never be triggered since it has nothing to click.
//EDITED BECAUSE I CANT READ PROPERLY ^^//
I would chain up two event handlers
$(document).on("event you desire","desired target", function() {
$("#my_span").trigger("click");
});
then:
$(document).on("click","#my_span", function() {
//stuff to happen
});
http://jsfiddle.net/vvt8Lvvu/ - jsfiddle for demo
Related
I am working on a very complex website and i have a piece of HTML on the page inside which no button is clickable. I think the click event gets caught somewhere so that the click handlers of the buttons do not fire.
How can I find out where those click events gets caught?
Add a click event listener to the document, and see what's catching the event:
document.addEventListener('click',function(e){
console.log(e.target);
})
Just check the event.target of the click event to see where it is.
There should be a document.click() or document.live("click",...) handler somewhere in the javascript included in the page, which returns false.
I have a search suggestion box that I hide when the search text box loses focus. This works great, except that when I click one of the suggestions the click event for that suggestion does not fire.
searchText.focusout(function () { $("#search-suggestions").hide(); });
I also tried:
searchText.focusout(function () { $("#search-suggestions").css("visibility", "hidden"); });
I tried commenting out the hide on unfocus code and the click events then worked fine.
(Basically, the blur event happens before the click on the suggestion can be registered, such that the element I attempted to click is not on the screen when the clicm does register)
here's the click event code:
//Called after the ajax load
$("#search-suggestions").find("a").click(function () { alert("hi"); })
I also tried rendering this on the server but it failed as well:
Search Suggestion
If any one has any suggestions I would appreciate it. Thanks!
You could try to define something like this:
//this goes where you first binding focusout handler
searchText.focusout(onFocusOut);
//this is a usual function
function onFocusOut() {
$("#search-suggestions").hide();
}
//this could be defined after you draw the search-suggestions control
$("#search-suggestions").hover(function() {
//this is hover in handler; unbind focusout from searchText
//something like that:
$("#searchText").unbind('focusout', onFocusOut)
}, function() {
//this is hover out handler; bind focusout to searchText
//something like that:
$("#searchText").bind('focusout', onFocusOut)
});
you could also use live (http://api.jquery.com/live/) to define hover handler for #search-suggestions, depending on what exactly you need.
This will make your search suggestions stay visible when clicking them. In click handler you can then hide them.
Try just making it invisible.
Change $('#my_search_box').hide(); to $('#my_search_box').css('visibility','hidden');
If you have surrounding DOM elements that need to act as if the search box is gone, you can just assign it an absolute position as well.
Try using .css('visibility', 'hidden') instead of .hide which uses display:none.
I have a 'li' that pops down when I click on a 'link' via jquery's 'click'.
Does anyone know of a clean way to do something along the lines of 'offclick'? As in, when I click off of the element, it would hide the pop down?
Thanks!
Matt
You would want to assign a click listener to the window and also assign the click listener to your link. Inside the link click listener, you'll want to stop the event propagation so it doesn't travel up the DOM tree and fire your window's click listener.
Something like this should do the trick:
$(window).click(function(){
$('li#my_li').slideUp();
});
$('a#my_link').click(function(event){
try
{
event.stopPropagation();
}
catch(err)
{
// IE does it this way
window.event.cancelBubble=true;
}
$('li#my_li').slideDown();
});
I guess you could look at blur, which is called when the element looses focus:
ref: http://api.jquery.com/blur/
You can use blur or focusout depending on your needs
I want to close the div if someone clicked outside that div. I have the below code:
$('body').click(function(e) {
$('div.test').slideUp('slow');
});
$('div.test').live('click',function(e) {
e.stopPropagation();
});
But the issue is that when someone click inside the div, the div itself is closing. I want to prevent that. After debugging I found a weird stuff the debugger is hitting the $(body).click first instead of $(div.test), May I know the reason for this? Can you help me in fixing the issue?
The problem is with your use of live.
live is a way of saying "bind a handler to the root element and capture any events that originated on an element matching a selector". It's a short form of delegate. This is possible because of "bubbling": events on elements are triggered on the element's ancestors as well.
If you do not specify otherwise, live binds the event handler to the document. The event handler on the body will be triggered first since the event won't have bubbled up to the document handler, where the e.stopPropagation() is.
The easiest solution would be to change live to click:
$('div.test').click(function(e) {
If you need to use live, introduce a container element, and handle the event there. I'll use delegate as I prefer its syntax, but you could use live if you preferred:
$('#container').delegate('div.test', 'click', function(e) {
e.stopPropagation();
});
The event is handled on #container and propagation is stopped, so the event never reaches the body's event handler.
What happens if you handle the body click with live() too?
I believe the live click handler doesn't propagate the event in the same way as a standard click. See this documentation.
I believe the problem arises because you are setting a click handler to <body>
I tried the same thing with <p> instead of <body> and it seems to work fine.
Here's a relevant fiddle:
http://jsfiddle.net/seNXV/7/
live() does not stop propagation. Says do in the jQuery docs.
You need to use delegate()
I'm trying to make a site where the user can click on any element to edit it's CSS. I use the following to add the click function to all <li>, <div> and <ul>.
$('li,div,ul').click(function () {
alert(this.id);
});
The problem is if I click on a <li> element, then I get the alert for that and any element underneath it. (all the containers).
Is it possible to have only the top element trigger when clicked?
You want to stop event propagation, you do this in jQuery by calling the stopPropagation method on the event object.
$('li,div,ul').click(function (e) {
e.stopPropagation();
alert(this.id);
});
I believe you'd want to use stopPropagation(); inside the click function.
It sounds to me like you're looking for .stopPropagation(). Calling stopPropagation will prevent the event from "bubbling" up to parent containers.