事件上的Jquery不绑定非现有元素

时间:2013-01-18 14:23:32

标签: javascript jquery event-delegation

好的,这里是jsfiddle的例子

http://jsfiddle.net/HTjCT/1/

正如您在悬停时可以看到的那样,它不会触发鼠标悬停事件

我该如何解决这个问题?

我正在使用Jquery 1.9

<div id='superdiv'>Click Me</div>


$(function () {
    $('#superdiv').on('click', function (event) {
        $('body').append('<div id="super">another');
    });
    $('#super').on('mouseover', function (event) {
        alert('not working');
    });
});

的javascript

3 个答案:

答案 0 :(得分:12)

你必须像这样使用“委托”(提供“直播”) $('body').on('mouseover', '#super', function (event) {

答案 1 :(得分:0)

您还可以将鼠标悬停在函数中的事件上,并在添加要受影响的新元素时调用它。 这样WickyNilliams指出的问题不会影响你。

$(function () { 
    $('#superdiv').on('click', function (event) { 
        $('body').append('<div id="super">another');
        mouse();
    }); 
    function mouse () {
        $('#super').on('mouseover', function (event) { 
            alert('not working'); 
        }); 
    });
    mouse();
}

答案 2 :(得分:-2)

要创建onclick的div未使用'&lt;关闭/ div&gt;'标签。

如果您尝试以下代码该怎么办:

$(function () {
    $('#superdiv').on('click', function (event) {
        $('body').append(
            $('<div/>',{ 'id' : 'super', 'text' : 'tetet'}).mouseover(function(event) { 
                    alert('test'); 
            })
        );
    });
});