0

我一直在制作这个表单，它必须使后端用户能够创建新问题供用户回答。在第一个.on(click)事件之后，表单被成功克隆并附加到 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();
});
});

因为我认为发布整个 HTML 模板有点过分，所以我为你们提供了一个JSFiddle。

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

4

1 回答 1

4

为了在新元素上触发 jQuery，您可以执行类似的操作

$( document ).on( "click", "<your id or class>", function() {
  //Do stuff
});
于 2013-10-30T16:07:57.247 回答