追加元素后如何添加事件函数?

时间:2018-11-17 03:39:53

标签: javascript jquery html

我单击按钮,它将在主体内附加一个div,然后,我想单击div来提醒味精。我尝试过但失败了。如何实现高亮区域。 example


curl -H "Content-Type: application/json" -d "{\"text\": \"<a href=' www.microsoft.com'>visit</a >\"}" <my webhook url>
curl -H "Content-Type: application/json" -d "{\"text\": \"[visit](www.microsoft.com)\"}" <my webhook url>
$(document).ready(function()
{
    $("button").click(function()
    {
        div = "<div class='test'>div</div>";
        $("body").append(div);
    });

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

3 个答案:

答案 0 :(得分:2)

您应该注意,当.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

答案 1 :(得分:0)

一种方法是,仅在将click事件附加到body标签之后注册监听器,注意取消注册以前的clicks事件,因此您不会在同一元素上遇到多次clicks事件。请注意,当文档准备就绪时,类.test仍然不存在任何元素,这就是代码无法正常工作的原因。检查下一个示例:

$(document).ready(function()
{
    $("button").click(function()
    {
        var div = "<div class='test'></div>";
        $("body").append(div);
            
        $(".test").unbind("click").click(function()
        {
            alert("A new div was clicked!");
        });
    });
});
.test {
    width: 200px;
    height: 200px;
    background: red;
    margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button type="button">Append new div</button>
</body>

答案 2 :(得分:0)

对于动态创建的元素,请使用.on,并在http://api.jquery.com/on/

了解更多关于.on的信息。
   $(document).ready(function(){
        $("button").click(function(){
            div = "<div class='test'></div>";
            $("body").append(div);
        });
        $(document).on('click', '.test', function(){
            alert("test");
        });
    });