IE не принимает мой onClick, любые предложения?

Question

У меня довольно простая функция, которая отлично работает в Chrome, Firefox и Safari, но в IE она ломается. Я на самом деле пытаюсь загрузить это как веб-приложение Windows 8, но из того, что я прочитал, используется более прощая версия IE10 для вывода.

Скажем, у меня есть <div> (или <a> с href ... Я попытался это так), как так:

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

Это моя функция:

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

Почему не будет ли это работать конкретно в IE?

Answer 1

Лучший вариант, особенно если вы используете jQuery, - это не использовать встроенные обработчики событий.

Вместо этого, используйте этот HTML-код:

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

И использовать этот Javascript:

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

Это не может решить вашу проблему с IE10, но это считается лучшей практикой ... и должны работать последовательно со всеми браузерами.

Несколько других предложений:

Вместо использования .attr установить атрибут #settingsButtononclick, вы можете также использовать on снова:

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

Хотя я не совсем уверен, что если бы имеют какое-то влияние на то, что проблема.

Тем не менее, вот объяснение разницы между attr и prop - .prop() vs .attr()

Кроме того, если вам необходимо точно указать, что URL для использования, даже на ослабленный <div> основы, вы можете использовать атрибут data-*. Скажем, это ваш HTML:

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

Тогда вы могли бы использовать:

$(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); 
    }); 
}); 

Щелчок первый DIV будет использовать "myTemplate.html", при нажатии второй будет использовать "myTemplate2.html".

Таким образом, ваши данные встроены в ваш HTML, но ваш Javascript ненавязчив.

Answer 2

Вы используете JQuery неправильно, здесь:

Во-первых, связать событие в DIV, вам нужно добавить класс или идентификатор для этого:

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

Затем связать событие :

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

И ваша функция:

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

Попробуйте это.