Got a bit of an odd anomaly,
My code works as intended in each browser except ie.
I use the following jQuery code:
$('a.remove').click(function()
{
//var listId = this.id;
alert('remove');
});
Ie doesn’t execute these commands to html which is added/appended to the DOM.
It works for class names in the original document but anything appended it doesn’t seem to work while others do.
Any ideas to what i’m doing wrong guys…
Many thanks,
Dave
Since that function is getting assigned to all anchors (with a class of ‘remove’) currently available in the DOM it will not affect those which are added later.
There are a few ways round this:
I agree with using liveQuery. Especially if the added elements are performed via jQuery.
Is this a documented problem with IE rather than me doing something wrong?
It has nothing to do with IE.
When you add an event on to page elements, like the .click event, that applies only to the existing elements on the page. New elements added on to the page do not have that event added to them.
jQuery has a plugin called liveQuery so that you can tell jQuery that certain groups of elements are to be watched, so that an event can be added to elements that are added to the page via jQuery.
Read the jQuery FAQ entry, Why doesn’t an event work on a new element I’ve created? and the [URL=“http://docs.jquery.com/Plugins/livequery”]liveQuery documentation page.
Ok but the event works on every other browser i’ve tested it on?
Ontop of that it works for tags and ID’s etc in ie… it’s just classes in ie.
I think I might just make unique id’s for all the clicks i need to execute instead of using classes?
Are you complaining that IE is less capable and requires extra work in order to make it perform similar to other browsers?
That’s a common complaint.
Well i’m simply trying to establish if either i’m doing something wrong or I am getting the correct result from ie and it doesn’t play friendly with what i’m trying to do. I’m all of a week into Javascript so there are many unanswered questions!
Your suspicions are correct. IE doesn’t play friendly. We still have to support IE because it has a large slice of the market, but boy oh boy there are many IE6 and IE7 issues that we wish we didn’t have to deal with.
At least we don’t have to deal with supporting IE5 problems much nowdays.
As a good example of browser support, Yahoo provides a graded support chart for different browsers and environments.
Either you’re using magical browsers or you’re assigning the event after elements have been added. Like Paul said, “When you add an event on to page elements, like the .click event, that applies only to the existing elements on the page.”
Have you got a link? How are the additional items being added to the DOM?
jQuery’s selector engine is second to none, in all common browsers, so I wouldn’t worry about the whole class/id/tag thing.
Sorry I have no link at the moment.
The additional items are getting added to the DOM via js.
jquery .load method in the case of external html pages.
js added DOM elements through ‘createElement’ and ‘appendChild’ to id.
When the elements get added and thus values changed I reload certain elements of the page.
I hope that makes sense!
If you have no link, the please post a simplified example of the html and js that can help us to duplicate your situation.
Then from a known situation we can provide helpful advise, instead of throwing guesses to the wind.
Hi guys heres the example, im writing a simple jsCart and the ‘Add’ button has an alert on the class which works for firefox but not ie.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../../jQuery/jquery-1.2.6.js"></script>
<script type="text/javascript">
var contentClass = null;
var printCartValue = ' ';
function displayPageStatus()
{
// statusOFF
pbPageStatusNo=document.createElement('div');
pbPageStatusNo.id='pageInCartNo';
pbPageStatusNoText=document.createTextNode('Add to Cart ' + establishPgId());
pbPageStatusNoLink=document.createElement('a');
pbPageStatusNoLink.setAttribute("class","addPageToCart");
pbPageStatusNoLinkText=document.createTextNode('| Add');
pbPageStatusNo.appendChild(pbPageStatusNoText);
pbPageStatusNo.appendChild(pbPageStatusNoLink);
pbPageStatusNoLink.appendChild(pbPageStatusNoLinkText);
if (printCartValue.indexOf(contentClass)==-1)
{
document.getElementById('pageInfo').appendChild(pbPageStatusNo);
}else{
document.getElementById('pageInfo').appendChild(pbPageStatusYes);
}
}
function displayCartStatus()
{
if (printCartValue == ' ')
{
document.getElementById('cartStatus').appendChild(printCarEmpty);
}else{
document.getElementById('cartStatus').appendChild(pbCartContentsList);
var tempArray = printCartValue.split(',')
for (i=0;i<tempArray.length;i++)
{
pbCartContentsItem[i]=document.createElement('li');
pbCartContentsLinkText=document.createTextNode(tempArray[i]);
pbCartContentsRemoveLink=document.createElement('a');
pbCartContentsRemoveLinkText=document.createTextNode('| Remove');
pbCartContentsRemoveLink.setAttribute("class",tempArray[i]);
pbCartContentsItem[i].appendChild(pbCartContentsLinkText);
pbCartContentsItem[i].appendChild(pbCartContentsRemoveLink);
pbCartContentsRemoveLink.appendChild(pbCartContentsRemoveLinkText);
pbCartContentsList.appendChild(pbCartContentsItem[i]);
}
}
}
function printCartDisplay ()
{
// Print Basket
printBasket=document.createElement('div');
printBasket.id='printBasket';
pbHeader=document.createElement('h2');
pbHeaderText=document.createTextNode('Basket');
pbHeader.appendChild(pbHeaderText);
printBasket.appendChild(pbHeader);
// Page State
pbPageStatusHolder=document.createElement('div');
pbPageStatusHolder.id='pageInfo';
pbPageStatusHeader=document.createElement('h3');
pbPageStatusHeaderText=document.createTextNode('This Page');
pbPageStatusHolder.appendChild(pbPageStatusHeader);
pbPageStatusHeader.appendChild(pbPageStatusHeaderText);
printBasket.appendChild(pbPageStatusHolder);
// Cart State
pbCartStatusHolder=document.createElement('div');
pbCartStatusHolder.id='cartStatus';
pbCartStatusHeader=document.createElement('h3');
pbCartStatusHeaderText=document.createTextNode('Cart');
pbCartStatusHolder.appendChild(pbCartStatusHeader);
pbCartStatusHeader.appendChild(pbCartStatusHeaderText);
printBasket.appendChild(pbCartStatusHolder);
// Page State - Page Not Selected
pbPageStatusNo=document.createElement('div');
pbPageStatusNo.id='pageInCartNo';
pbPageStatusNoText=document.createTextNode('Add to Cart ' + 'pg03');
pbPageStatusNoLink=document.createElement('a');
pbPageStatusNoLink.setAttribute("class","addPageToCart");
//pbPageStatusNoLink.id='addPageToCart';
//pbPageStatusNoLink.setAttribute("href","#");
pbPageStatusNoLinkText=document.createTextNode('| Add');
pbPageStatusNo.appendChild(pbPageStatusNoText);
pbPageStatusNo.appendChild(pbPageStatusNoLink);
pbPageStatusNoLink.appendChild(pbPageStatusNoLinkText);
// Page State - Page Selected
pbPageStatusYes=document.createElement('div');
pbPageStatusYes.id='pageInCartYes';
pbPageStatusYesText=document.createTextNode('You have added ' + 'pg03' );
pbPageStatusYesLink=document.createElement('a');
pbPageStatusYesLink.setAttribute("class","removePageFromCart");
pbPageStatusYesLinkText=document.createTextNode(' | Remove');
pbPageStatusYes.appendChild(pbPageStatusYesText);
pbPageStatusYes.appendChild(pbPageStatusYesLink);
pbPageStatusYesLink.appendChild(pbPageStatusYesLinkText);
if (printCartValue.indexOf(contentClass)==-1)
{
pbPageStatusHolder.appendChild(pbPageStatusNo);
}else{
pbPageStatusHolder.appendChild(pbPageStatusYes);
}
// Cart State
pbYourCartHeader=document.createElement('h3');
pbYourCartHeaderText=document.createTextNode('Your Cart');
pbCartContentsList=document.createElement('ul');
pbCartContentsItem=document.createElement('li');
pbCartContentsItemLink=document.createElement('a');
pbCartContentsItemText=document.createTextNode('Page Test');
pbCartContentsLinkText=document.createTextNode('| Remove');
printCarEmpty=document.createTextNode('Your Basket is empty.');
if (printCartValue == ' ')
{
pbCartStatusHolder.appendChild(printCarEmpty);
}else{
pbCartStatusHolder.appendChild(pbCartContentsList);
var tempArray = printCartValue.split(',')
for (i=0;i<tempArray.length;i++)
{
pbCartContentsItem[i]=document.createElement('li');
pbCartContentsLinkText=document.createTextNode(tempArray[i]);
pbCartContentsRemoveLink=document.createElement('a');
pbCartContentsRemoveLinkText=document.createTextNode('| Remove');
pbCartContentsRemoveLink.setAttribute("class",tempArray[i]);
pbCartContentsItem[i].appendChild(pbCartContentsLinkText);
pbCartContentsItem[i].appendChild(pbCartContentsRemoveLink);
pbCartContentsRemoveLink.appendChild(pbCartContentsRemoveLinkText);
pbCartContentsList.appendChild(pbCartContentsItem[i]);
}
}
document.getElementById('content').appendChild(printBasket);
$('h3').click(function()
{
alert('muggins h3');
});
$('#pageInfo a').click(function()
{
alert('muggins a');
});
$('a.addPageToCart').click(function()
{
alert('muggins class');
});
$('a.addPageToCart').click(function()
{
alert('muggins class');
});
$('a#addPageToCart').click(function()
{
alert('muggins id');
});
}
$(document).ready(function() {
// put all your jQuery goodness in here.
//ADS.log.write('Content Class '+contentClass);
printCartDisplay ();
$('a.addPageToCart').click(function()
{
alert('muggins class');
});
});
</script>
<link href="http://localhost/testSuite/daveBrewer/jsPrintCart/jsCartTest/printCart.css" rel="stylesheet" type="text/css">
<style>
#jsDiv{ height:100px; width:400px; border:1px solid #369;}
#htmlDiv{ height:100px; width:400px; border:1px solid #369;}
span {display:block; background:#369; color:#fff;}
#printBasket {border:1px solid #ccc; padding:10px; width:400px;}
#printBasket h2 {font-weight:bold;}
#printBasket h3 {font-weight:bold; padding:5px 0 3px; color:#E8011D;}
#printBasket #pageInfo {border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-bottom:6px; margin-top:4px;}
#printBasket a { cursor:pointer;}
.addPageToCart {}
</style>
</head>
<body>
<div id="container">
<div id="content" class="pg01">
</div>
</div>
</body>
</html>
$('a.addPageToCart').click(function()
{
alert('muggins class');
});
^ This isn’t working, right?
Try getting rid of the capitals.