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 回答