Question

以下代码适用于Chrome和FireFox，但在IE上无法正常运行：

if (jQuery.trim(jQuery("#"+element_id.name).val()) != "" && jQuery.trim(jQuery("#"+element_id.name).val()) != "0") {
  jQuery("#filters-box").append('<span id="filter-'+ element_id.name +'" class="toggler"><button class="button white" onClick="removeFilter(\'filter-' + element_id.name + '\')"> ✖ </button>' + document.getElementById(element_id.name + "_caption" ).value + ' -> ' + document.getElementById(element_id.name).value + '</span>');
}

虽然它可以附加HTML代码并在页面上正确呈现它们，但是它的onClick事件会生成上述错误消息。

Answer 1

奇怪的是我试过更改你的功能名称＆＃34; removeFilter＆＃34;它工作得非常好请找到更改

＆＃13;

var element_id = {
  name: "test",
  "test_caption": "_caption"
};

function rmvFilter(ele) {

  alert(ele);
}

var html = '<span id="filter-' + element_id.name + '" class="toggler">';
html += '<button class="button white" id="button" onClick="rmvFilter(\'caption_' + element_id.name + '\');"> ✖ </button></span>';
jQuery("#filters-box").append(html);

＆＃13;

我没有在你的代码中发现任何错误，只是名称的确切组合并非仅在IE9中奇怪地工作

Answer 2

如果使用jQuery预编译字符串，则可以附加事件，就像它已经在DOM中一样（基本上）。这是更干净，非突兀的，应该适用于jQuery支持的所有浏览器：

if (jQuery.trim(jQuery("#"+element_id.name).val()) 
    != "" && jQuery.trim(jQuery("#"+element_id.name).val()) != "0") {

    // precompile to a temp var
    var $temp = jQuery('<span id="filter-'+ element_id.name +'" class="toggler"><button class="button white"> ✖ </button>' + document.getElementById(element_id.name + "_caption" ).value + ' -> ' + document.getElementById(element_id.name).value + '</span>');

    // this works fine
    $temp.find('button.button.white').on('click', function () { removeFilter('filter-' + element_id.name); });

    jQuery("#filters-box").append($temp);
}

Answer 3

谢谢你，Kartheek。我刚用一个名为＆＃34; removeFilter（event）＆＃34;的函数遇到了同样的问题。在IE9中（它在Firefox和Chrome中运行良好）并且更改功能名称也适用于我。

我只能假设这是IE的某种内置函数，IE9没有实现，所以浏览器调用了错误的函数，抛出了未实现的错误。

SCRIPT16385：未实现

3 个答案: