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

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

        }

    };

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

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

---

单击is后，需要解除文本框的单击事件绑定

HTML:

Javascript:

工作示例：

---

您还可以使用焦点而不是单击，以确保如果用户在字段中添加了另一个选项卡，则会创建另一个选项卡。

单击后，您需要解除文本框单击事件的绑定

HTML:

Javascript:

工作示例：

---

您还可以使用焦点而不是单击来确保如果用户在字段中添加了另一个选项卡，则会创建另一个选项卡。

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

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

---

演示

摆脱那些在线垃圾，做些更性感的事

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

---

demo

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

HTML:

JS:

更新：更干净的版本，使用-无需存储数据。感谢David Fregoli指出了替代方案

HTML:

JS:

---

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

HTML:

JS:

更新：更干净的版本，使用-无需存储数据。感谢David Fregoli指出了替代方案

HTML:

JS:

---

不需要绑定和解除绑定，请尝试以下操作：-

使用jquery元素构造函数以更可读的方式创建元素。使用事件委派到有史以来创建的最后一个输入元素

---

不需要绑定和解除绑定，请尝试以下操作：-

使用jquery元素构造函数以更可读的方式创建元素。使用事件委派到有史以来创建的最后一个输入元素

---

如果有其他方法侦听单击事件，则取消绑定单击可能不合适。使用3行代码而不是2312321321如何？我尝试了这个代码，它的工作就像一个符咒感谢bundleUnbinding click如果您有其他方法侦听click事件，则可能不适合使用bundleUnbinding click。使用3行代码而不是2312321321如何？我尝试了这个代码，它的工作就像一个符咒谢谢一个捆绑包，你可以避免一些代码使用一个而不是on来一次性绑定events@DavidFregoli哦，太酷了，谢谢你！我将使用更好的版本进行更新：您可以避免某些代码使用one而不是on进行一次性绑定events@DavidFregoli哦，太酷了，谢谢你！我将使用更好的版本进行更新：

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

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

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

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

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

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