0

私は自分のウェブページ上で動的にテキストボックスを生成しようとしています。見つけた例を使用して動作させましたが、各行に追加している[削除]ボタンで問題が発生しています。

Firebugは最後の行で構文エラーを出しますが、なぜそれが不平を言っているのか理解できません。

jQuery関数は次のとおりです。

$(document).on('ready', function () {

    var counter = 2;

    $("#addButton").click(function () {
        if(counter>10){
            alert("Only 10 learning objectives allowed per page.");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div'))
             .attr("id", 'TextBoxDiv' + counter);
        newTextBoxDiv.after().html('<label>Page Objective ' + counter + ' : </label>' +
            '<input type="text" name="tbObjective' + counter +
            '" id="tbObjective' + counter + '" value="" >' +
            '<input type="button" value="Remove Objective" class="removeObjective">').click(function() {
                alert('fired');
                $(this).remove();
            });
    });
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });

    $("#removeButton").click(function () {
        alert('fired');
        if(counter==1){
            alert("No more textbox to remove");
            return false;
        }   
        counter--;
        $("#TextBoxDiv" + counter).remove();
    });

    $(".removeObjective").click(function () {
        alert('fired');
        var $id = $(this);
        $($id).remove();
    });

});   //Firebug is showing a syntax error here?
4

2 に答える 2

1

20行目は、追加のセットが]);あり、そのセットが含まれている準備完了コールバックを時期尚早に閉じていました。

このコードは構文的に正しいです：

$(document).on('ready', function () {

    var counter = 2;

    $("#addButton").click(function () {
        if(counter>10){
            alert("Only 10 learning objectives allowed per page.");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div'))
             .attr("id", 'TextBoxDiv' + counter);
        newTextBoxDiv.after().html('<label>Page Objective ' + counter + ' : </label>' +
            '<input type="text" name="tbObjective' + counter +
            '" id="tbObjective' + counter + '" value="" >' +
            '<input type="button" value="Remove Objective" class="removeObjective">').click(function() {
                alert('fired');
                $(this).remove();
            });
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });

    $("#removeButton").click(function () {
        alert('fired');
        if(counter==1){
            alert("No more textbox to remove");
            return false;
        }   
        counter--;
        $("#TextBoxDiv" + counter).remove();
    });

    $(".removeObjective").click(function () {
        alert('fired');
        var $id = $(this);
        $($id).remove();
    });

});
于 2013-03-25T18:11:55.420 に答える
0

カウンターの要点がテキストボックスに一意のIDを与えることである場合、それをデクリメントする必要はありません。実際、デクリメントすると問題が発生すると思います。

それ以外の

($this).remove

使用する

$('#TextBoxDiv' + counter).remove();
于 2013-03-25T18:12:40.500 に答える