javascript - 追加元素后如何添加事件函数？

Question

我单击按钮，它会在正文中附加一个 div，然后，我想单击该 div 来提醒消息。我尝试过，但失败了。我怎样才能实现突出显示区域。 example

$(document).ready(function()
{
    $("button").click(function()
    {
        div = "<div class='test'>div</div>";
        $("body").append(div);
    });

    $(".test").click(function()
    {
        alert("test");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Append div</button>

Answer 1

您应该注意，当文档准备就绪时，具有 .test 类的元素不存在(这就是您的代码不起作用的原因)，它们是动态添加的。所以，我会这样做:

$(document).ready(function()
{
    $("button").click(function()
    {
        var div = $("<div></div>").addClass('test'); // this is creating div element in dom as jquery 

         // Then attach click function to purpose of its create
        div.click(function()
        {
            alert('test')
        });

        $("body").append(div);// then this is appending created div
    });
});

jsfiddle Playground