1

我想在单击已创建的文本字段时创建一个新的文本字段。我已经编写了正在运行的函数，但问题是，它应该只在单击最后一个时创建一个新的文本字段，例如，如果有三个文本字段并且单击前两个不会添加新的文本字段。只有点击第三个文本字段才能创建一个新的。使用以下代码无法正常工作（它是一个 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);" />
4

4 回答 4

2

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

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确保如果用户在该字段中添加选项卡，则会创建另一个选项卡。

于 2013-05-09T16:33:45.913 回答
2

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

使用 jquery 元素构造函数以更易读的方式创建元素。对曾经创建的最后一个输入元素使用事件委托。

演示

$(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);
    
}
于 2013-05-09T16:52:52.627 回答
2

摆脱那些内联的废话，做一些更性感的事情

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

演示http://jsfiddle.net/APnHy/3/

于 2013-05-09T16:40:05.010 回答
1

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

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

这是强制性的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);
});

更新了 jsfiddle

于 2013-05-09T16:41:33.723 回答