Question

我单击按钮，它将在主体内附加一个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");
    });
});

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

Answer 2

一种方法是，仅在将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>

Answer 3

对于动态创建的元素，请使用.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");
        });
    });

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

3 个答案: