在插入DOM的元素中未触发onclick

Question

动态按钮（在页面加载后加载到DOM的按钮）的onclick事件不会在IE的某些特定实例中触发。 尤其是在IE中的服务器窗口上，可以调用此问题。 它不依赖于IE版本。

HTML：

<div id="test"></div>

JS：

$(function() {
    $('#test').append('<input type="button" onclick="alert(1);" value="Test"/>');
});

JSFIDDLE： http : //jsfiddle.net/sbzu7xkz/4/

我知道还有其他方法可以通过其他方式绑定onclick，但不幸的是，这是不可能的。

• 当我将按钮加载到页面时，是否可以采取一些变通方法，例如调用一些初始化方法？
• 解决方案中是否描述了某个问题？
• 是否可以通过修补或重新配置IE来解决？

任何帮助。

Answer 1

在这种情况下，不会触发带有内联JS事件的动态添加的元素。 请使用jQuery

.on( "click", handler ) //or a shortcut .click()

一个讨厌的解决方法是在以下特定情况下附加事件以防万一：

var wrapper = $('#test');

wrapper.append('<input type="button" onclick="alert(1);" value="Test 2"/>');

//if click event isn't presented
if (typeof(wrapper.getElementsByTagName('input')[0].onclick) === 'undefined'){
    // let's attach the event
    $('#test>input[type="button"]').click(function(){
        var js = $(this).attr('onclick');
        // and evaluate your JS
        eval(js);
    });
}

当然，如果理想的话，就不会发生这种情况。 所有事件都应在JS中动态绑定。

这个小提琴已经在较旧的IE上进行了测试，效果很好：

http://jsfiddle.net/sbzu7xkz/5/

Answer 2

较旧的浏览器在使用HTML Singleton Tags遇到一些麻烦。 尝试使用“正确的” /旧的HTML。

    $('#test').append('<input type="button" onclick="alert(1);" value="Test"></input>');

IE只会附加使用正确html的项目（IE希望关闭html标签）