Javascript 为什么我的JQuery函数在事件变为“事件”时不会在克隆的元素上触发；真的；？

我一直在制作这个表单，它必须使后端用户能够创建新的问题供用户回答。在第一次（单击）事件后，表单被成功克隆并附加到div（选择器#content）中，但如果按下克隆按钮，表单不会再次复制。应用于我的下拉选择的.on（change）事件确实会像预期的那样更改各个div的内容，但只会更改原始表单

以下是JQuery代码：

$(document).ready(function () {
$('.addAnswer').on("click", function () {
    var idx = $('#mp div[name^="antwoord"]:last').index() + 1;
    $clone = $('#mp div[name^="antwoord"]:first').clone(true, true).attr('class', 'answer content_' + idx);
    $('.removeAnswer').show;
    $('#mp').append($clone);
    $('.answer:last').each(function () {
        $('b:last').empty();
        $('b:last').prepend(String.fromCharCode(64 + idx) + ". ")
        $('.addAnswer').on("click", function () {
            idx++;
        });
    });
    if (idx == 2) {
        $('.removeAnswer').show();
    }
});

$('.nextq').click(function () {
    var newqid = $('#content form:last').index() + 1;
    $('.done, .nextq, .remove').hide();
    $('#content').append('<hr>');
    $('#content').append($('form').html()).attr('class', 'q_' + newqid);
    $('.nextq').on("click", function () {
        newqid++;
    });
    $('.done:last, .nextq:last, .remove:last').show();
    return false;
});

$('.group').hide();
$('#text:last').show();
$('.select:last').on("change", function () {
    $('.group').hide();
    $('#' + $(this).val() + ':last').fadeIn();
    $('button.' + $(this).val() + ':last').fadeIn();
});
});

$（文档）.ready（函数（）{
$（'.addAnswer'）。在（“单击”，函数（）{
var idx=$（'mp div[name^=“antwoord”]：last'）。index（）+1；
$clone=$（'mp div[name^=“antwoord”]：first'）.clone（true，true）.attr（'class'，'answer content'+idx）；
$（'.removeAnswer'）.show；
$（'#mp'）。追加（$clone）；
$（'.answer:last'）。每个（函数（）{
$（'b:last'）.empty（）；
$（'b:last'）.prepend（String.fromCharCode（64+idx）+>）
$（'.addAnswer'）。在（“单击”，函数（）{
idx++；
});
});
如果（idx==2）{
$（'.removeAnswer'）.show（）；
}
});
$（'.nextq'）。单击（函数（）{
var newqid=$（“#内容形式：last”）.index（）+1；
$（'.done.nextq.remove'）.hide（）；
$（“#内容”）。追加（“
”）；
$（'content'）.append（$（'form'）.html（））.attr（'class'，'q'+newqid）；
$（'.nextq'）。在（“单击”，函数（）{
newqid++；
});
$（'.done:last、.nextq:last、.remove:last'）.show（）；
返回false；
});
$（'.group'）.hide（）；
$（'#text:last'）.show（）；
$（'.select:last'）。打开（“更改”，函数（）{
$（'.group'）.hide（）；
$（'#'+$（this.val（）+'：last'）.fadeIn（）；
$（'button.+$（this.val（）+'：last'）.fadeIn（）；
});
});

因为我认为发布整个HTML模板会有点太多，所以我为大家提供了一个

---

对于那些感觉亲切的人来说，还有一个额外的问题：在JQuery代码中，可以看到HTML的内容正在使用.HTML（）进行解析，并附加.append（上的第33行），因为.on（change）函数会切换它应该更改的分区的内容，.HTML（）看到这些变化，并将这些变化带到身边。我希望.on（click）函数将div的内容附加到其原始状态，后端用户事先所做的更改不会改变该状态。如果有任何帮助，我们将不胜感激。

为了在新元素上使用jQuery触发器，您可以执行以下操作

$( document ).on( "click", "<your id or class>", function() {
  //Do stuff
});

$（文档）。在（“单击”，函数（）上）{
//做事
});

为了在新元素上使用jQuery触发器，您可以执行以下操作

$( document ).on( "click", "<your id or class>", function() {
  //Do stuff
});

$（文档）。在（“单击”，函数（）上）{
//做事
});

您可以尝试在加载时而不是单击时克隆表单。然后你会有一份原始表单的副本，你可以在点击事件中附加它。那么，我应该怎么做呢？我是否只是将声明的$clone对象从函数中取出，并将其放在.ready（）中的代码顶部？我还不知道呢！是的，确切地说，您唯一需要做的另一件事是在onclick事件中克隆该克隆。请参见这里的fiddle示例。我可能有点困惑，但这是另一把基于你的小提琴的小提琴，我必须改变一些东西才能正常工作。我在顶部克隆了你的整个身体。我希望这就是你想要的。好吧，试试这个。你可以试着在加载时而不是点击时克隆表单。然后你会有一份原始表单的副本，你可以在点击事件中附加它。那么，我应该怎么做呢？我是否只是将声明的$clone对象从函数中取出，并将其放在.ready（）中的代码顶部？我还不知道呢！是的，确切地说，您唯一需要做的另一件事是在onclick事件中克隆该克隆。请参见这里的fiddle示例。我可能有点困惑，但这是另一把基于你的小提琴的小提琴，我必须改变一些东西才能正常工作。我在顶部克隆了你的整个身体。我希望这就是你想要的。好吧，试试这个