javascript - IE not taking my onClick, any suggestions? -

i have pretty simple function seems work fine in chrome, firefox, , safari, in ie it's breaking. i'm trying load windows 8 web app, i've read, uses more forgiving version of ie10 output.

say have <div> (or <a> href...i've tried well) so:

<div onclick="showsection('mytemplate.html');"></div> 

this function:

function showsection(loca) {     $("#optionview").show();     $("#bookmenu").hide();     $("#optionview").load('settings/'+loca);         $("#settingsbutton").attr("onclick","showsettingsmain();"); } 

why wouldn't work in ie?

a better option, since using jquery, not use inline event handlers.

instead, use html:

<div id="main_div"></div> 

and use javascript:

$(document).ready(function () {     $("#main_div").on("click", function () {         showsection("mytemplate.html");     }); }); 

this may not solve problem ie10, it's considered better practice...and should work consistently browsers.

a few other suggestions:

instead of using .attr set onclick attribute of #settingsbutton, might use on again:

$("#settingsbutton").on("click", function () {     showsettingsmain(); }); 

although i'm not sure if have effect on problem is.

nonetheless, here's explanation on difference between attr , prop - .prop() vs .attr()

also, if need specify url use, on per-<div> basis, use data-* attribute. html:

<div class="trigger-div" data-target-url="mytemplate.html"></div> <div class="trigger-div" data-target-url="mytemplate2.html"></div> 

then use:

$(document).ready(function () {     $(".trigger-div").on("click", function () {         var $this = $(this);         var target_url = $this.attr("data-target-url");  // or $this.data("target-url")         showsection(target_url);     }); }); 

clicking first div use "mytemplate.html", while clicking second use "mytemplate2.html".

this way, data embedded in html, javascript unobtrusive.