0

スクリプトでイベント（アラート）を起動しようとして問題が発生しました。これはhtmlです：

<div class="dynamic-form">
    <form>
      <div class="inputs"></div>
      <a href="#" id="add">ADD</a>
      <input name="submit" type="button" class="submit" value="Submit">
    </form>
</div>

そしてJS：

$(document).ready(function(){

    var i = 1;

    $('#add').click(function() {
        $('<div id="d' + i + '" class="fielddiv"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><a href="#" id="remove_question">Cancella</a><hr></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });

    $('#remove_question').on("click", function(event) {
        alert('dsfsfd');
        //$('#d' + $this.attr('todel')).remove();
    });


    // here's our click function for when the forms submitted

    $('.submit').click(function(){

        var answers = [];
        $.each($('.field'), function() {
            answers.push($(this).val());
        });

        if(answers.length == 0) {
            answers = "none";
        }  

        alert(answers);

        return false;                     
    });

});

クリック機能の質問を削除するとアラートが発生するはずですが、何も実行されておらず、エラーも発生していません。何が間違っているのでしょうか。こちらもjsfiddleです。

4

2 に答える 2

2

委任構文が必要です。また、IDではなくCLASSESを使用してください。そうしないと、IDが重複します。

JSfiddleの動作：

http://jsfiddle.net/Z6x8X/2/

コード：

$(document).ready(function(){

    var i = 1;

    $('#add').click(function() {
        $('<div id="d' + i + '" class="fielddiv"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><a href="#" class="remove_question">Cancella</a><hr></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });

    $(document).on("click", ".remove_question", function(event) {
        alert('dsfsfd');
        //$('#d' + $this.attr('todel')).remove();
    });


    // here's our click function for when the forms submitted

    $('.submit').click(function(){

    var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val());
    });

    if(answers.length == 0) {
        answers = "none";
    }  

    alert(answers);

    return false;

    });


});
于 2013-02-09T21:38:57.063 に答える
0

動的に追加される要素の場合、委任されたイベントハンドラーが必要です。

$(document).on('click', '#remove_question', function(event) {
    alert('dsfsfd');
});

また、コードを使用すると、同じIDで無限の数のアンカーを追加できますが、IDは一意である必要があるため、これも機能しません。

于 2013-02-09T21:37:20.780 に答える