Clever Geek Handbook

JQuery Live click not working in IE with tag

I have an anchored tag in my page that is dynamically added using jQuery:

<a href="#" id="ClickMe">Click Me</a>

I have the following jQuery in my $(document).ready(function() 

 $("#ClickMe").live('click', function()
 {
     $("#SomeDiv1").show();
     $("#SomeDiv2").hide(); 
 });

This works fine in firefox, but not IE. I'm developing in IE8 currently, but I need it to work in minimal IE7.

+2


source to share


5 answers


I solved the problem by injecting the function call into the anchor tag displayed in the info window.

eg.



> <a href="#" id="ClickMe" onclick="ClickMeFunc();">Click Me</a>
+1


source


The code probably works as it should, only it doesn't do what you expect; since you are not doing anything to stop the click event by triggering the browser navigation, which could prevent your div from showing and hiding.

Try the following:



$('#ClickMe').live('click', function(ev) {
    $('#SomeDiv1').show();
    $('#SomeDiv2').hide();

    // Stop event handling in non-IE browsers:
    ev.preventDefault();
    ev.stopPropagation();
    // Stop event handling in IE
    return false;
});
+3


source


I believe I have a solution. I worked for the same problem by adding 'click' to the 'a' tag that doesn't exist yet. Worked in FF but not IE. The tag a

had onclick

, defined on it:

onclick="hideSubPage($('#formula-editor'));return false;"

I wanted to add additional function to 'click' (specific update).

After hacking for a while, I removed the existing one onclick

from the tag a

and everything worked, even in IE.

Basically, to make it jquery.live()

work in IE, it looks like the control jquery.live()

cannot have an event already attached.

on page1 add click event to tag a

.

$('#returnfromformulaeditor').live('click', function(ev) { hideSubPage($('#formula-editor'));  ev.preventDefault(); ev.stopPropagation(); refreshFormulaList();return false; });

on page 2 - tag a

before

<a href='#' id="returnfromformulaeditor" onclick="hideSubPage($('#formula-editor'));return false;" class="BackLink">&lt;&lt;Return </a>

on page 2 - tag 'a' after

<a href='#' id="returnfromformulaeditor"  class="BackLink">&lt;&lt;Return </a>
+1


source


Because "Click" will bind a click event to a handler when the document is ready, but will not attach the same "Click" events if any element is dynamically generated in the dom. This is why we use "live".

Dude, if ".live" doesn't work in IE8, go to ".delegate". I use this and it works great in all browsers.

+1


source


Why not use an click

event instead live

? You are binding to an element with an ID, so I am assuming that you will not have other elements added later with the same ID; and that defeats the purpose of using the function live

.

Try the following:

$("#ClickMe").click(function()
 {
     $("#SomeDiv1").show();
     $("#SomeDiv2").hide(); 
 });
0


source






More articles:


All Articles