problem with Jquery LIVE with $(this) - javascript

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?

Related

jQuery: autoclick link?

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()

Delegate onclick handler of one element from another using Jquery

My question is as follows:
I have a dynamically generated element that has onclick='removeMe()', a function that causes it to removes itself.
I used jQuery .on('click',selector,handler) delegation to bind a function to this element, to execute a specific block of code.
However, the element removes itself and in doing so deletes the handler that would execute that block of code.
To spice things up: the block of code must be run after the element is removed, and I cannot edit the function that removes the element to execute my code after.
I'm new to jQuery, so the first solution that popped into my head was to somehow bind the handler to another element that is never removed, which runs when the first element is clicked.
Is that possible?
Are there any other, better solutions I haven't thought of? Am I missing something obvious?
If my explanation is not clear I can provide clarification or provide the actual situation in which this takes place.
Thanks in advance!
Edit: Answered by Sivapriyan, and that solution is exactly what I needed. Thank you!
Why don't you just run everything in your onClick handler.
$( "#target" ).click(function() {
$(this).remove();
//Execute your block of code :)
});
$(document).on("click",".selector",function(){
alert("I will always live");
});
Declare in that way and you handler will always a live. Now the handler is on the document and no on the $element

Can I write e.preventDefault() using jQuery to all links in my code?

I was wondering about that:
I have some links in my html file and to most of them I need to write in their click functions to not jump to the top of the page (which e.preventDefault() does that)ת I need to write that action aside from the functions that they actually do.
can I write something like that:
$('a').click(function(){e.preventDefault()})
Will it work? or will it create conflicts with the real functions if I will write like:
$('a').click(function(){e.preventDefault()});
$('a#goingToDoSomething').click(function(){console.log('just did it')})
I ask because I want to make my code better - but wasn't sure if that was the way..
thanks,
Alon
Yes it will work, if you pass the normalised event object to the callback function:
$('a').click(function (e) {
e.preventDefault();
});
No, there won't be any conflicts (conflicts? huh?). You can bind extra click handlers to your links and they will work as expected.
The other answers are correct, but not as efficient as:
$('body').on('click', 'a', function(e){
e.preventDefault();
});
Edit:
$(document).on
will be even faster, but not tested it, should work though
requires jQuery 1.7+
It should work fine provided you pass the event object to the click handler. Try this
$('a').click(function(e){e.preventDefault()})

jQuery toggle running twice

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.

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.

Categories

Resources