IE ignores added onclick attribute

Question

The Jquery code below works ok with firefox, Safari, Opera but not with IE. I kinda know why this isn't working in IE after reading a lot about it but I do not know how to fix it. My understanding (I think) is that this method will assign a attribute of "onclick" in IE rather than an event method. Therefore it will not fire in IE and the href fires instead which in this case is "#" which is exactly what is happening. What is the correct way of adding the onclick event. There is more javascript code below the code shown but I do not think it's relevant to the question.

<a id="product_photo_zoom_url" href="/PhotoGallery.asp?ProductCode=9857%2D116%2D003"  
title="9857-116-003 Ignition box"><img id="product_photo" 
src="/v/vspfiles/photos/9857-116-003-2T.jpg" border="0"
alt="9857-116-003 Ignition box" /></a> <br /><a id="product_photo_zoom_url2"  href="/PhotoGallery.asp?ProductCode=9857%2D116%2D003"
title="9857-116-003 Ignition box">
<img src="/v/vspfiles/templates/100/images/buttons/btn_largerphoto.gif" border="0"></a>





var global_URL_Encode_Current_ProductCode;
var global_Config_ProductPhotosFolder;
var global_Current_ProductCode;

var titleattr = $("a#product_photo_zoom_url").attr("title"); 
var picurl='tb_show(titleattr, \'/PhotoDetails.asp?ShowDESC=N&ProductCode=\' + global_URL_Encode_Current_ProductCode + \'&TB_iframe=true&height=600&width=520\');return false;'

$("a#product_photo_zoom_url").attr('onclick', picurl);
$("a#product_photo_zoom_url").attr('href', '#');

$("a#product_photo_zoom_url2").attr('onclick', picurl);
$("a#product_photo_zoom_url2").attr('href', '#');

Answer 1

function picurl()
{
  tb_show(titleattr, '/PhotoDetails.asp?ShowDESC=N&ProductCode=' 
 + global_URL_Encode_Current_ProductCode 
 + '&TB_iframe=true&height=600&width=520');  
  return false;
} 

$("a#product_photo_zoom_url").click(picurl);

You can get rid of the var picurl = .... Note that picurl is now a function, rather than a string of code.

Answer 2

You are using jQuery, there's no reason why not to use it's cross-browser event handling abstraction:

//...
$("a#product_photo_zoom_url").click(function () {
  tb_show(titleattr, '/PhotoDetails.asp?ShowDESC=N&ProductCode=' +
                     global_URL_Encode_Current_ProductCode + 
                    '&TB_iframe=true&height=600&width=520');
  return false;
});
//...

Note that we are using a function, not a string as the event handler.

Give a look to:

• .click()

Answer 3

Try using:

$("a#product_photo_zoom_url").click(picurl);

Make sure that you wrap your code in ready handler. Sot it should be like:

$(function(){
  $("a#product_photo_zoom_url").click(picurl});
});