Set the mouseover Attribute of a div using JQuery - javascript

I would like to set an attribute for a div. I have done this:
$('#row-img_1').onmouseover = function (){ alert('foo'); };
$('#row-img_2').onmouseout = function (){ alert('foo2'); };
However, the above has not worked, it does not alert when mouse is over or when it moves out.
I have also tried the $('#row-img_1').attr(); and I could not get this to work either.
I am aware that I should be using a more effective event handling system but my divs are dynamically generated. Plus this is a small project. ;)
Thanks all for any help.

You need to bind the event function to the element. Setting the event attributes has no effect, as they are interpreted only when the page is loading. Therefore, you need to connect the event callback in a different manner:
$('#row-img_1').mouseover(function() {
alert('foo');
});
$('#row-img_2').mouseout(function() {
alert('foo2');
});
In jQuery, there are two more events: mouseenter and mouseleave. These are similar, but mouseenter does not fire upon moving the mouse from a child element to the main element, whereas mouseover will fire the event again. The same logic applies to mouseleave vs mouseout.
However, jquery provides a shortcut for this kind of usage: the .hover method.

$('#row-img_1').bind('mouseenter', function(event){
// event handler for mouseenter
});
$('#row-img_1').bind('mouseleave', function(event){
// event handler for mouseleave
});
or use jQuerys hover event which effectivly does the same
$('#row-img_1').hover(function(){
// event handler for mouseenter
}, function(){
// event handler for mouseleave
});

Events are registered as functions passed as attributes, like this:
$('#row-img_1').mouseover(function (){ alert('foo'); });
$('#row-img_2').mouseout(function (){ alert('foo2'); });
Also, note the missing on from the onmouseover.

$('#row-img_1').mouseover(function() {
alert('foo');
});

Related

jQuery not rebinding event to handler after unbinding

I have the following jQuery code:
$(document).on('focusout', '#element', function(e){
alert('test');
});
$(document).on('click', '#element_b', function(e){
$(document).off('focusout','#element');
/* do other stuff */
$(document).on('focusout','#element',function(){});
});
On clicking on #element_b, the event bound to #element is supposed to get off and then back on but for some reason after it goes off, it doesn't return back on. How to get it back on?
In order to be able to re-bind a handler, the handler function must be available for reference at the point it would be re-bound. To achieve that, just define the handler function with a name:
function focusOutHandler(e) {
alert("test");
}
$(document).on("focusout", "#element", focusOutHandler);
Then you can also reference the function in your "click" handler:
$(document).on('click', '#element_b', function(e){
$(document).off('focusout','#element');
/* do other stuff */
$(document).on('focusout', '#element', focusOutHandler);
});
Now, that said, that operation really doesn't make a lot of sense in the context of your question. While the "click" handler code is running, the "focusout" code will not run anyway. Thus, removing the handler at the start of the code and then adding it back at the end won't have any noticeable effect.
I would personally argue for a different approach so you can stop modifying the bindings. Instead change your matcher so it is more restrictive.
$(document).on('focusout', '#element:not(.restricted)', function(e){
alert('test');
});
If you made the selector like this, all you would have to do to "toggle" it on or off is add/remove the restricted class to the element, or whatever more restrictive matcher you give the delegate.

trigger event globally in jquery

I am binding a custom event on div. I want to trigger that event globally without specifying target element.
edit:
Right now I am binding my custom event with div but it can be bind with any of tag. So instead of trigger event with selector. I want to trigger it globally.
I want to avoid repetition like
$('p').trigger('customevent')
$('div').trigger('customevent')
var g= document.getElementsByTagName('div')
$('div').bind('alwaysListen',function(){
$(this).hide()
});
$('a').click(function(){
$.event.trigger('alwaysListen');
});
Here's the fiddle.
Event will be bubbling across DOM nodes up and down anyway, so in some way it;s anyway global;
That's why you can do :
$(document).on('alwaysListen', function(){
//do stuff
});
Here is a link to you updated jsfiddle: https://jsfiddle.net/fa1s9e0s/7/

child click event firing parent mouseover event

I have tree structure in which mouse over on node name displays (UL) list. Each item in the list has a click event attached to it. The issue Im facing is when I click on any child item in list, it fires the mouseover event attached to parent span. Can you guys please help how to solve this issue?
<span id="treeNodeText">
<ul><li id="firstItem">First Item</li></ul>
</span>
My code is like this:
I have conman event attach method:
attachEvents(domId,eventType,callBackFunction,otherParams)
In attachEvent function I attach events to dom ids and assign appropriate call back functions
The mouseover event is fired before you click. So, apart with a delay, you can't prevent its handling.
Here's one way to deal with that :
var timer;
document.getElementById("treeNodeText").addEventListener('mouseover', function(){
clearTimeout(timer);
timer = setTimeout(function(){
// handle mouseover
}, 400); // tune that delay (depending on the sizes of elements, for example)
});
document.getElementById("firstItem").addEventListener('click', function(){
clearTimeout(timer); // prevents the mouseover event from being handled
// handle click
};
In JavaScript, events bubble up the DOM. Please read more about it: event order and propagation or preventDefault/stopPropagation.
In short, you can pervent event bubbling by
function callBackFunction(event){
event.stopPropagation()
}
or
function callBackFunction(event){
return false
}
return false also has the effect of preventing the default behavior, so it's technically equivalent to:
function callBackFunction(event){
event.stopPropagation()
event.preventDefault()
}
function myfunction(e){
e.stopPropagation()
e.preventDefault()
}
this will Help

Check for mouseenter after page is loaded

One of my elements has a mouseenter event on it. The trouble is, I can't add the event until the dom is fully loaded, so I use something like:
document.observe('dom:loaded', function() {
${"my_element").observe("mouseenter", function() { ... }
});
Now, the user might be mousing over the element before the page is fully loaded, and so the event doesn't fire. They have to move their mouse to have it fire. How can I detect if I should fire the event after the page is fully loaded, so the user doesn't have to move their mouse?
the $(document).ready(function(){ and $(function(){ fire when the dom is ready, use on to attach an event handler function for one or more events to the selected elements:
$(function(){
${"my_element").on("mouseenter", function() { ... }
});
This doesn't directly answer your question, but livequery might help you. I think it attaches event handlers immediately, but it might wait until the DOM has been loaded, in which case it doesn't help you.
Depending on the effect you're applying, can you use a CSS rule to simulate it?
Something like
#my_element:hover { color: red }
Then in jQuery, in your mouseenter method, jQuery.Rule to remove the rule.

Jquery help me analyze what happened: mouseover/mouseout ok but not hover/unhover

I've been working on some code where I trigger the code on hover/unhover. Then I decided to trigger the same code also on focus/blur. Usually with hover/unhover only, I go for the usual hover comma no unhover format. But this time since I was trying to add focus/blur, I had to use bind and use this.bind with the second part too, like this:
$.fn.gogogo = function (msg) {
$(this).bind("hover focus", function(){
$("#screen").html(msg).show();
});
$(this).bind("unhover blur", function(){
$("#screen").html("").hide();
});
}
The problem was that no matter what I did, hover/unhover didn't take. I had to revert back to mouseover/mouseout like this. The code is identical except for the words hover/unhover vs. mouseover/mouseout
$.fn.gogogo = function (msg) {
$(this).bind("mouseover focus", function(){
$("#screen").html(msg).show();
});
$(this).bind("mouseout blur", function(){
$("#screen").html("").hide();
});
}
I thought hover/unhover was just the jquery abstraction of mouseover/mouseout. How come the behavior is different here: hover/unhover breaks my code, while mouseover/mouseout is ok?
thanks.
There is no event called hover.
The hover method is a convenience method that binds event handler to the mouseenter and mouseleave events.
If you open the jQuery source, you'll see that the hover method is defined like this:
hover: function(fnOver, fnOut) {
return this.mouseenter(fnOver).mouseleave(fnOut);
},
You should bind to the mouseenter and mouseleave events instead.
EDIT: The difference between mouseenter and mouseover is that mouseenter (and mouseleave) don't bubble. This means that you'll get a mouseover event if the mouse moves into any element inside the one you bound to (which is probably not what you want), whereas you'll only get a mouseenter event if the mouse entered that element itself. For an example, see the documentation.
There is no "hover" event. That's just a convenience routine.

Categories