js动态添加的li，js事件无法触发！急急急

Question

动态添加的li 没法触发这个事件........求大神帮忙

/**
 * 移动到li上添加符号 移出删除
 */

$(".ul-class > li").hover(function (event) {
    $(this).append("<a id='del' onclick='del(this)'><span class=\"glyphicon glyphicon-remove\" ></span></a>");
}, function (event) {
    $("#del").remove();
});

Answer 1

用on代理(jquery需要1.7+以上，一下的用live绑定)，不过不能用hover了

改mouseenter和mouseout

<ul class="ul-class">
    <li>111111</li>
    <li>22222</li>
    <li>3333</li>
</ul>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script>
    $('body').on('mouseenter', '.ul-class>li', function () {
        $(this).append("<a id='del' onclick='del(this)'><span class=\"glyphicon glyphicon-remove\" ></span></a>");
    }).on('mouseout', '.ul-class>li', function () { $("#del").remove(); });

    setTimeout(function () { $('.ul-class').append('<li>3333</li><li>3333</li>') })
</script>