1

作成済みのテキスト フィールドをクリックしながら、新しいテキスト フィールドを作成したい。機能する関数を作成しましたが、問題は、最後のテキスト フィールドをクリックしたときにのみ新しいテキスト フィールドを作成する必要があることです。たとえば、3 つのテキスト フィールドがあり、最初の 2 つをクリックしても新しいテキスト フィールドが追加されない場合です。3 番目のテキスト フィールドをクリックするだけで、新しいテキスト フィールドを作成できます。次のコードでは、正しく動作していません (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);

        }

    };

ページがロードされたときの物乞いには、次のようなテキスト フィールドが 1 つだけあります。

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

4 に答える 4

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

You need to unbind the click event for the textbox after is has been clicked.

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
    }

};

Working example: http://jsfiddle.net/bz5q4/

You could also use focus instead of click to ensure that if the user tabs into the field another one is created.

于 2013-05-09T16:33:45.913 に答える
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 に答える