帮忙看下这段jQuery代码为啥不起作用

Question

jquery

Answer 1

<div class="test"></div>
    <script>
        $(".test").html("<u>100</u>分");
        $(".text u").live('click',function () {
            alert("he");
        })
    </script>
因为u标签是动态添加的

Answer 2

你这个明显写错了test/text
  <div class="test"></div>
    <script>
        $(".test").html("<u>100</u>分");
        $(".text u").click(function () {
            alert("he");
        })
    </script>

Answer 3

你的回答帮到了我，但我有点不明白的是使用live("click",function(){})和普通的.click(function(){})有什么区别呢？

Answer 4

    <div class="test"></div>
    <script>
     $(function(){
 $("<u>100</u>分").appendTo( $(".test")).click(function () {
            alert("he");
        });
}) 
    </script>

Answer 5

live  就是你后添加的元素也会被绑定方法。

Answer 6

新增的U标签，你这种click是找不到的！最新的方法是推荐用.on();
$(".test").html("<u>100</u>分");
        $(".text ").on("click","u",function () {
            alert("he");
        })这样就行了！

Answer 7

方法有很多,还有一种是利用事件冒泡原理
当触发一个节点事件,事件会从其子节点依次向上传递
先把事件设置在父节点上,触发父节点事件时会先触发其子节点的事件
在这个过程中我们只要判断是否触发到我们想要的子节点(<U>)即可从性能的角度来说,这种做法值得推荐
<div id="test" class="test"></div>
    <script>
$(".test").html("<u>100</u>分");
// 利用事件冒泡原理,给div添加事件
       document.getElementById('test').onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;

// 不是<u>标签就返回
if(target.nodeName !== 'U') {
return;
}
// 到达<u>标签,触发事件
alert('he')

// 阻止默认行为并取消冒泡
if(typeof e.preventDefault === 'function') {
e.preventDefault();
e.stopPropagation();
}else {
e.returnValue = false;
e.cancelBubble = true;
}
}
        
    </script>