IE not taking my onClick, any suggestions?

Question

I have a pretty simple function that seems to work fine in Chrome, Firefox, and Safari, but in IE it's breaking. I'm actually trying to load this as a Windows 8 Web App, but from what I've read, that uses a more forgiving version of IE10 to output.

Say I have a <div> (or an <a> with an href...I've tried this as well) like so:

<div onClick="showSection('myTemplate.html');"></div>

This is my function:

function showSection(loca) {
    $("#optionView").show();
    $("#bookMenu").hide();
    $("#optionView").load('settings/'+loca);    
    $("#settingsButton").attr("onClick","showSettingsMain();");
}

Why wouldn't this work specifically in IE?

I thought the onclick attribute name had to be fully lowercase. — atondelier, Apr 05 '13 at 19:46
@lib3d Nope, that's when setting it in Javascript. In HTML, it doesn't matter. Although in certain HTML specs, it's enforced (or not) — Ian, Apr 05 '13 at 19:47
@TheJason - Which `onClick` are you talking about? When you click your div, are you sure the `showSection()` is or isn't executing? Or are you referring to your `.attr("onClick"` part? — Ian, Apr 05 '13 at 19:54
Add a space before your closing div tag as well. IE has been known to ignore elements with no content. — davidcondrey, Jun 26 '14 at 23:52

score 4 · Accepted Answer · edited May 23 '17 at 12:13

4

A better option, especially since you are using jQuery, is to not use inline event handlers.

Instead, use this HTML:

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

And use this Javascript:

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

This may not solve your problem with IE10, but it's considered better practice...and should work consistently with all browsers.

A few other suggestions:

Instead of using .attr to set the onclick attribute of #settingsButton, you might as well use on again:

$("#settingsButton").on("click", function () {
    showSettingsMain();
});

Although I'm not exactly sure if that would have any effect on what the problem is.

Nonetheless, here's an explanation on the difference between attr and prop - .prop() vs .attr()

Also, if you need to specify exactly what URL to use, even on a per-<div> basis, you could use a data-* attribute. Say this is your HTML:

<div class="trigger-div" data-target-url="myTemplate.html"></div>
<div class="trigger-div" data-target-url="myTemplate2.html"></div>

Then you could 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 the first div will use "myTemplate.html", while clicking the second will use "myTemplate2.html".

This way, your data is embedded in your HTML, but your Javascript is unobtrusive.

edited May 23 '17 at 12:13

Community

1
1

answered Apr 05 '13 at 19:41

Ian

50,146
13
101
111

3

It's clearly much better practice but it would be interesting to know why OP's code doesn't work on IE10. – Denys Séguret Apr 05 '13 at 19:43
1

This is definitely the right answer, how would he handle changing the function he wants to run onClick tho? – tymeJV Apr 05 '13 at 19:43
@dystroy Absolutely, I wish I could reproduce/suggest something. But then again, hopefully this "better practice" would solve it anyways – Ian Apr 05 '13 at 19:43
This is good advice. Always avoid inline event handlers when using jQuery. Also good practice is to use prop rather than attr. – Moby's Stunt Double Apr 05 '13 at 19:44
@Moby'sStuntDouble Even without using jQuery, `addEventListener` and `attachEvent` should still be preferred/suggested. But good point :) – Ian Apr 05 '13 at 19:44
@dystroy I think you're referring to the `$("#settingsButton").attr(` part? Either way, you're right, and I'll add that. – Ian Apr 05 '13 at 19:45
I know it's redundant in this scenario, just educating the OP on prop and the attr deprecation in jQuery. – Moby's Stunt Double Apr 05 '13 at 19:45
@dystroy Nevermind, I guess I didn't fully read Moby's last comment – Ian Apr 05 '13 at 19:46
1

This has turned into a fabulous educational answer, @Ian. Should be proud of this one. – Moby's Stunt Double Apr 05 '13 at 20:03

score 0 · Answer 2 · answered Apr 05 '13 at 19:46

You are using jQuery wrong, here:

First, bind the event to the div, you'll need to add a class or id for that:

<div id="myEvent"></div>

Then, bind the event:

$('#myEvent').on('click', showSection( 'myTemplate.html') );

And your function:

function showSection(loca) {
    $("#optionView").show();
    $("#bookMenu").hide();
    $("#optionView").load('settings/'+loca);    
}

Try that way.

IE not taking my onClick, any suggestions?

2 Answers2