Question

我想在点击已创建的文本字段时创建新的文本字段。我编写了正在运行的功能，但问题是，它只应在单击最后一个时创建一个新的文本字段，例如，如果有三个文本字段并且单击前两个将不添加新的文本字段。只有单击第三个文本字段才能创建新文本。使用以下代码它无法正常工作（它是一个Java脚本函数）：

    var FieldCount=1;
    function addInputField(count)  //on add input button click
    {           

        alert(FieldCount);
        alert(count);
         if(FieldCount == count) 
        {

            FieldCount++; 


            var field = "#textfield_"+count;

            $node = '<input id="textfield_'+FieldCount+'" type="text" name="textfield"    onClick="addInputField(FieldCount);" />';
            $(field).after($node);

        }

    };

页面加载时，只有一个文本字段：

    <input id="textfield_1" type="text" name="textfield" onClick="addInputField(FieldCount);" />

Answer 1

单击“是”后，您需要取消绑定文本框的click事件。

<强> HTML：

<input id="textfield_1" type="text" />

<强>使用Javascript：

$(document).ready(function () {
    $("#textfield_1").click(function () {
        addInputField(FieldCount);
    });
});

var FieldCount = 1;

function addInputField(count) //on add input button click
{

    //alert(FieldCount);
    //alert(count);
    if (FieldCount == count) //max input box allowed
    {

        FieldCount++; //text box added increment
        //add input box

        var field = "#textfield_" + count;


        $node = '<input id="textfield_' + FieldCount + '" type="text" name="textfield" />';
        $(field).unbind("click").after($node);

        $('#textfield_' + FieldCount).click(function () {
            addInputField(FieldCount);
        });

        //text box increment
    }

};

工作示例：http://jsfiddle.net/bz5q4/

您还可以使用focus代替click来确保如果用户在字段中选中另一个，则会创建另一个。

Answer 2

摆脱内联垃圾并做一些更性感的事情

$('form').on('click', 'input:last', function() {
   $(this).after( $(this).clone() );
})

demo http://jsfiddle.net/APnHy/3/

Answer 3

不需要绑定和取消绑定试试这个： -

使用jquery元素构造函数以更易读的方式创建元素。将事件委托用于最后创建的输入元素。

Demo

$(document).on('click', 'input[type=text]:last' ,create);

function create(e)
{
  var input = $('<input />',{
        id: "textfield_" + ($(this).index() + 1),
        type:"text",
        name:"textfield"
    });

    $(this).after(input);

}

Answer 4

这是一个将行为附加到类并将索引存储在元素中的版本，这使得它非常健壮：

<强> HTML：

<input class="incfield" type="text" name="textfield" data-index="1" />

<强> JS：

$(function(){
    var createNewField = function(){
        var index = $(this).data('index');
        if (index == $('input.incfield').length) {
            var $node = $('<input class="incfield" name="textfield" />');
            $node.data('index', index + 1);
            $node.click(createNewField);
            $(this).after($node);
        }
    };
    $('input.incfield').on('click', createNewField);
});

Here it is the obligatory jsfiddle

更新：使用jQuery.one更清晰的版本 - 无需存储数据。感谢David Fregoli指出替代方案。

<强> HTML：

<input class="incfield" type="text" name="textfield" />

<强> JS：

$(function(){
    var createNewField = function(){
        var $node = $('<input class="incfield" type="text" name="textfield" />');
        $node.one('click', createNewField);
        $(this).after($node);
    };
    $('input.incfield').one('click', createNewField);
});

Updated jsfiddle

单击上一个文本字段时创建一个新的文本字段

4 个答案:

Demo