JQuery :: Event.stopPropagation Doesn't Work With IE?
Jan 11, 2011
I'm doing a tree-like structure using divs inside divs. I use event.stopPropagation() to stop parent events from firing when clicking inside them. This works just fine in Chrome and Firefox, but in IE8, I get an error message ("Object doesn't support this property or method") and the events propagate to the parents.
[Code]...
This works fine in Firefox and Chrome, but IE8 throws an error on event.stopPropagation(); saying "Object doesn't support this property or method". I have tried passing event as an argument to the function that handles the stopping of propagation but that doesn't help either. What's wrong and how do I fix it?
I have a DIV that contains some links. I have an onmouseout event handler on the DIV, and I want it triggered only when the mouse leaves the DIV. Since there are Anchors in the DIV, onmouseout events will be generated when the mouse moves from one link to another, and those events will bubble up to the DIV. According to all the documentation that I have read, I should be able to prevent that from happening by having an onmouseout event handler for each of the anchors, and calling event.stopPropagation in the event handler. But it is not working in Mozilla and Opera, the onmouseout still bubbles up from the anchor to the DIV. I have it working in IE, but that is because IE does not support stopPropagation(), and instead uses window.event.cancelBubble=true, which Mozilla and Opera do not support. Code:
As far as I understood, stopPropagation() is supposed to stop events bubbling 'up' though the element tree (through parent elements). Eg. If I use stopPropagation() on a click event on an anchor element in a list, the event would not be triggered on the list. In my code I have a popup div, that needs to have stopPropagation(), as a click on the document (everywhere other than the popup) will hide it. When I add an element to the popup that has a live click event, the live click event is never called, even though it is a child element of the popup. Shouldn't the live click get called first? If I remove the stopPropagation all is well.. some code:
I'm trying to add a simple growing effect to a div using jquery, i'd like to create a button that changes his dimentions on the over event of the mouse and turn back to the original dimensions once the mouse is out.
I've used the hover event and I've created 2 functions:one for the growing effect used on the over status and the other one for the reduce effect used on the out status.In IE 7 I've got this error: the growing function is working but the reduction function is not working at all the error code on javascript it's only "Invalid property value".
Here some code:
function makeBig(){ $(this).animate({ "opacity":"0.80", "width":"200px",
I'm messing around with the two new event handling methods .on() and .off() but I seem to be doing something wrong... My code;
<div id="links-wrapper"> <a href="#">Click me #1</a> <a href="#">Click me #2</a> <a href="#">Click me #3</a> </div> [Code]...
What happens is that a click event is being attached to the anhors after the html loaded. The handler alerts which link you clicked and should then remove all events from the anchors from the given selector (resulting in that you should not be able to fire the event again) but this doesn't happen.
I found the bug ticket with similar problem: [URL] but it was closed as invalid. The problem still exists for me. I have the following live event: $("a:not([onclick])").live('click', ajaxLinkHandler); It's not applying to content loaded via $.ajax(...).responseXML which I used to append in the following way:
// withing ajaxLinkHandler var content = $(loadedDocument).find("[component='"+ id +"']"); $(this.contentContainer).empty().append(content);
i have a basic 2 column page, on the left is the navigation, on the right the content.i'm loading in the content with the load() method - some php generated html code which looks like this e.g.
so if i click on the toggle div.. nothing happens so i tried to put a <p id="toggle"> in the navigation bar which is static (not being load()-ed in via jQuery) and it worked so it seems to me, that jQuery can't get the click event out of the load()-ed page
I've set the animation to large numbers (1000) to make it very obvious.
The helper will show before the other fieldSets have been hidden. The show animation begins about half way through the hide animation. Since both elements are occupying the same space, this makes the container jump around in size as it breifly expands to fit one under the other.
I'm using my custom component that has a combo box (jsf's h:selectOneMenu, which has a onselect event)in it and it already has a onchange event, so I want the onchange event to trigger another onselect event with jQuery and it only works in Firefox.
I tried it without the component and it looks like this:
I have some problem with onunload where I want slideUp my menu when I go out form site. I have the slideDown function fire at body onload and this function work properly. but the slideUp() at onunload not.
My code: $(window).unload(function() { $('#menuContent1').slideUp(); alert('Handler for .unload() called.'); });
and even the alert work. Only the jQuery slideUp not working.
I have a js(using jQuery lib) file where all events and following actions(functions) are written. For one of such events there is a function that prepends one more similar element from which prepending was called:
so that when I will click to just prepended element one more element should be prepended and so on.The problem is that when new element is prepended, click event doesn't work on it. jQuery doesn't recognize it, like doesn't see it.
I'm trying to augment Object.prototype with an addEvent method that will add event listeners, and will work regardless of whether the browser is IE or not.Here's what I have: So far it seems to work in non-IE browsers, but in IE8 it doesn't work. Where am I going wrong?
I'm working on a image slider, which will slide left to right and vice versa on mouser over event. the images are dynamically loaded from the database using ASP script. I use mootools.svn.js for the sliding implementation. and Ajax to pass the id of the image to another page as a query string. this is implemented in a onclick="getValue('<%= id %>')" event. This works fine in IE8, but when I test in Firefox 3.6 and Chrome the onclick event doesn't work. when I comment the mootools.svn.js, the onclick event get fired.
I got this problem with live() event.I have used it as follows.
$(".addressDiv span").live("mouseover", function(){ //clickable function here...... ------------------------ });
I have used the live() event to trigger the function on mouseover in the dynamically added elements. But the problem i got is that once the live event is called it takes the class of the element and stores. And when the class of that particular element is changed dynamically the live() event does not detect the new classed added dynamically, instead it takes the former class. Live() event does not update the class.
This is a makeshift sort function for a table. I want to replace a div contents with a javascript function call. It works fine if I define the individual case, but the general case doesn't work. The problem lies with the +divHold+ part. It never converges to the passed value on the 2nd iteration. This is my Div:
<p> text <a>link</a> </p> ---- $("p").live("click", ... something cool...); $("p a").live("click", function(e){e.stopPropagation();}); //so the link is still followed but the click event on the P is not triggered.
This fails since live events bubble differently than bound events. So, what I have to do instead is $("p a").live("click", function(e){return false;}); but then the link is not followed. So, I do $("p a").live("click", function(e) location.href=this.href; return false;}); but then "open in new window" doesn't function correctly. Is there a good way to overcome this limitation/behavior?
I tried to use fade in the code below, it works in firefox but not ie7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
