Question

我一直在尝试在我的网页上动态生成文本框。我使用了一个我发现的示例，但是我在使用“删除”按钮时遇到了问题，我将添加到每一行。

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?

Answer 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();
    });

});

Answer 2

如果计数器的整个点是为文本框提供唯一的ID，则不需要递减它。实际上我认为减少会导致问题。

而不是

($this).remove

使用

$('#TextBoxDiv' + counter).remove();

jQuery动态文本框问题

2 个答案: