Javascript 函数不处理追加字符串

我在单击类名时编写了函数。而且它的效果很好。但是，当我附加一个具有相同类名的标记时，该函数不在该类上工作

<script> 
    $(document).ready(function() {

        $("#btn1").click(function(){
            $("p").append(" <b class='test'>Appended text</b>.");
        });

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

    });
</script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
    <li class="test">List item 1</li>
</ol>

<button id="btn1">Append text</button>

$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
$（“p”）。追加（“追加文本”）；
});
$（“.test”）。单击（函数（）{
警觉（12）；
});
});
这是一段

这是另一段

列出第1项
附加文本

这是因为jQuery在调用

$（“.test”）时绑定了事件。单击（…）

。您需要单独绑定它：

$("#btn1").click(function(){
    $("p").append(" <b class='test'>Appended text</b>.")
          .click(function(){alert(12);});
});

$（“#btn1”）。单击（函数（）{
$（“p”）.append（“追加文本”）
。单击（函数（）{alert（12）；}）；
});

阅读有关最终解决方案的信息：单击“列表项1”时，它会向“12”发出两次警报。已修复。但我会选择重复问题的解决方案。