jquery 和 html DOM

Question

如何使附加元素可点击？在这种情况下，单击 "Hello" 应该会更改 #div1.

的背景

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").append("<p>Hello</p>");
        });
        $("p").click(function(){
            $("#div1").css({"background":"#0ff"});
        });
    });
    </script>
    <style>
    #div1 {
        background:#ff0;
        height:100px;
        margin:0 0 50px 0;
        }
    p {cursor:pointer;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <button type="button">Click Me!</button>
</body>

谢谢！

Answer 1

使用event delegation 使用.on()

$(document).on('click', 'p', function(){
    $("#div1").css({"background":"#0ff"});
});

由于您已经动态添加了 html <p>Hello</p>，因此无法直接附加事件，您必须使用如上所示的事件委托。

Answer 2

使用下面的代码。它被称为事件委托。阅读更多 here

$(document).on('click','p',function(){
        $("#div1").css({"background":"#0ff"});
});

jquery 和 html DOM

jquery and html DOM

jquery

html

dom