Question

以下是我的代码，为什么当我点击附加文字时它是否正常工作？

1：点击这是一个段落。

2：点击附加文字

3：必须以红色显示附加项。

＆＃13;

$(document).ready(function(){
    $(".ali").click(function(){
        $(this).parent().append("<b class='reza'>Appended text</b>");
    });
    $(".reza").click(function(){
        $(this).append("<li style='color:red'>Appended item</li>");
    });
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

    <p><span class="ali"> This is a paragraph. </span> </p>


</body>
</html>

＆＃13;

Answer 1

由于尚未创建具有“reza”类的元素，因此需要使用“reze”类在future元素上定义click事件。检查以下工作代码。

$(document).ready(function(){
    $(".ali").click(function(){
        $(this).parent().append("<b class='reza'>Appended text</b>");
    });
    $("body").on("click",".reza",function(){
        $(this).append("<li style='color:red'>Appended item</li>");
    });
});

Answer 2

动态添加到文档中的元素无法通过常规方式发出事件侦听器。

这就是你通常在jQuery中添加事件监听器的方法。

$(element).on('click', function() {
    // do something
});

上面的示例无法使用动态添加的元素的原因是由于在编译脚本时该元素不存在。

那为什么会这样呢？

$(parent).on('click', 'element' function() {
    // do something
});

这是有效的，因为在编译文件时，父文件已经存在。如果您有对父项的引用，则可以随时检索子项。由于DOM是模块化的。

这个问题以这种或那种方式已被多次提出。这是首选答案。

Event binding on dynamically created elements?

如何使用两个＆＃39; onclick＆＃39;事件

2 个答案: