0

私は、バックエンド ユーザーがユーザーが回答する新しい質問を作成できるようにする必要があるこのフォームを作成しています。最初の.on(click)イベントの後、フォームは複製されて div (selector #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)関数は、変更する必要がある部門の内容を切り替えます。.on(click)関数を使用して、div のコンテンツを元の状態で追加し、バックエンド ユーザーが事前に行った変更によって変更されないようにしたいと考えています。これについての助けは大いに義務付けられています。

4

1 に答える 1

4

新しい要素でjQueryトリガーを使用するには、次のようにします

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