javascript 如何在jquery中获取动态创建的文本框的动态ID

how to get dynamic id of dynamically created textbox in jquery

提问by Nitish

i want to perform keyup event via textbox id, and all textbox are dynamically created with onclick button event. for this i have to make 20 keyup function. if i use 20 keyup function then my code will become too lengthy and complex. instead of this i want to use a common function for all textbox. can anybody suggest me how to do it..thanks

我想通过文本框 id 执行 keyup 事件，并且所有文本框都是使用 onclick 按钮事件动态创建的。为此，我必须制作 20 个 keyup 功能。如果我使用 20 keyup 函数，那么我的代码将变得过于冗长和复杂。而不是这个，我想为所有文本框使用一个通用函数。谁能建议我怎么做..谢谢

here is what i am doing to solve it:

这是我正在做的事情来解决它：

<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button></div>
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
    </div>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script>
$(document).ready(function() {
    var counter = 2;
    $(".add_field_button").click(function() {
        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
            '<input type="text" name="textbox' + counter +
            '" id="firsttextbox' + counter + '" value="" >&nbsp;&nbsp;<input type="text" name="textbox' + counter +
            '" id="secondtextbox' + counter + '" value="" >  <a href="#" id="remove_field">Remove</a><input type="text" id="box' + counter + '" value="">sum</div>');
        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;

    });

    function check(a, b) {
        var first = a;
        var second = b;
        var temp = temp;
        var novalue = "";
        result = parseInt(first) + parseInt(second);
        if (!isNaN(result)) {
            return result;
        } else {
            return novalue;
        }
    }


    $(this).on("keyup", "#firsttextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;
        var number = 2;
        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#firsttextbox3", function(e) {
        var number = 3;
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);
        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#firsttextbox4", function(e) {
        var number = 4;
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);
        final = document.getElementById('box4').value = result;
    });

    $(this).on("keyup", "#secondtextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;

        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#secondtextbox3", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);

        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#secondtextbox4", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);

        document.getElementById('box4').value = result;
    });


    $(this).on("click", "#remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent('#target').remove();
        counter--;

    });


});
</script>

回答by somethinghere

See the snippet below to see how you can make this implementation more modular and useable. The trick is to think: what do I want to do? I want to be able to add multiple inputs and add their value, printing the result in another input.

请参阅下面的代码片段，了解如何使此实现更加模块化和可用。诀窍是思考：我想做什么？我希望能够添加多个输入并添加它们的值，在另一个输入中打印结果。

It comes down to using classes- since we are going to use the same kind of thing for every row. Then apply something that works for all classes. No IDs whatsoever! You can even use the nameproperty of the input that contains the value you want to save. Using the []in that property will even pass you back a nice array when POSTING!

这归结为使用classes- 因为我们将在每一行使用相同类型的东西。然后应用适用于所有类的东西。没有身！您甚至可以使用name包含要保存的值的输入属性。[]在该属性中使用甚至会在发布时传回一个不错的数组！

I know this looks like a daunting lot, but remove my comments and the number of lines reduces dramatically and this kind of code is almost infinitely extendable and reusable.

我知道这看起来令人生畏，但是删除我的注释，行数会急剧减少，而且这种代码几乎可以无限扩展和重用。

But have a look, this works and its simple and - most of all - it's DRY (don't repeat yourself0 once you do, re-evaluate as there should be a better way!)!

但是看一看，这很有效，而且很简单，而且 - 最重要的是 - 它是干的（don't repeat yourself0 完成后，重新评估，因为应该有更好的方法！）！

Update

更新

You could also use a <ol>as a wrapper and then add an <li>to this every time, so you get automatic counting of boxes in the front end without any effort from your end! Actually, thats so nice for this that I have changed my implementation.

您也可以使用 a<ol>作为包装器，然后<li>每次都添加一个，这样您就可以在前端自动计算盒子，而无需您的任何努力！实际上，这很好，我已经改变了我的实现。

var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;

add.click(function(event){
    
    // create a limit
    if($(".box").length >= maximumBoxes){
        alert("You cannot have more than 10 boxes!");
        return;
    }
        
    var listItem = $('<li class="box"></li>');
    // we will add 2 boxes here, but we can modify this in the amountOfBoxes value
    for(var i = 0; i < amountOfInputs; i++){
        listItem.append('<input type="text" class="input" />');
    }
    listItem.append('<input type="text" class="output" name="value" />');
    // Lets add a link to remove this group as well, with a removeGroup class
    listItem.append('<input type="button" value="Remove" class="removeGroup" />')
    listItem.appendTo(all);
});

// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("keyup", "input.input", function(event){
    // Get the group
    var group = $(this).parent();
    // Get the children (all that arent the .output input)
    var children = group.children("input:not(.output)");
    // Get the input where you want to print the output
    var output = group.children(".output");
    // Set a value
    var value = 0;
    // Here we will run through every input and add its value
    children.each(function(){
        // Add the value of every box. If parseInt fails, add 0.
        value += parseInt(this.value) || 0;
    });
    // Print the output value
    output.val(value);
});

// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event){
    event.preventDefault();
    $(this).parent(".box").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />

回答by Jeremy Thille

You can target all your textboxes, present or future, whatever their number, with a simple function like this :

你可以用一个简单的函数来定位你所有的文本框，现在或将来，无论它们的数量是多少：

$(document).on("keyup", "input[type=text]", function(){
   var $textbox = $(this);
   console.log($textbox.val());
})

$("button").click(function(){
   $("#container").append('<input type="text" /><br>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="text" /><br>
  <input type="text" /><br>
  <input type="text" /><br>
</div>
<button>Create one more</button>

You don't need complicated generated IDs, not necessarily a class (except if you have other input[type=text]you don't want to conflict with). And you don't need to duplicate your code and write 20 times the same function. Ever. If you're duplicating code, you're doing wrong.

您不需要复杂的生成 ID，也不一定是类（除非您有其他input[type=text]不想与之冲突的ID ）。而且您不需要复制代码并编写 20 次相同的函数。曾经。如果你在复制代码，那你就做错了。

回答by leaf

A little helper to combine with your favorite answer:

结合您最喜欢的答案的小帮手：

var uid = function () {
    var id = 0;
    return function () {
        return ++id;
    };
}();

Usage:

用法：

uid(); // 1
uid(); // 2
uid(); // 3

回答by Pavel Gatnar

Add classes "a" and "b" to the textboxes and "box" to the box. Then add data-idx attribute with the index (unused!?). Finally register the event handlers:

将类“a”和“b”添加到文本框，将“box”添加到框。然后使用索引添加 data-idx 属性（未使用！？）。最后注册事件处理程序：

 $('.a').on('keyup', function(e){
    e.preventDefault();
    var $this = $(this)
    var $p = $this.parent()
    var a= this.value; 
    var b= $p.find('.b').val()
    var number =$this.data('idx') //unused!?
    var result = check(a,b)
    $p.find('.box').val(result)
 })
 $('.b').on('keyup', function(e){
    e.preventDefault();
    var $this = $(this)
    var $p = $this.parent()
    var a= $p.find('.a').val()  
    var b= this.value
    var result = check(a,b)
    $p.find('.box').val(result)
 })

Or a general one:

或者一般的：

 $('.a,.b').on('keyup', function(e){
    e.preventDefault();
    var $p = $(this).parent()
    var a= $p.find('.a').val()  
    var b= $p.find('.b').val()
    var result = check(a,b)
    $p.find('.box').val(result)
 })

回答by Saswat

Providing a code-snippet which may give you some hint:

提供一个可能会给你一些提示的代码片段：

$(".add_field_button").click(function () 
{
    if (counter > 10) 
    {
        alert("Only 10 textboxes allow");
        return false;
    }
    var txtBoxDiv = $("<div id='TextBoxDiv"+counter+"' style='float:left;width:10%; position:relative; margin-left:5px;' align='center'></div>");

     //creating the risk weight
     var txtBox1 = $('<input />', 
                           {
                            'id'     : 'fst_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                            'onClick' : 'txtBoxFun(this,'+counter+')'
                          });
     var txtBox2 = $('<input />', 
                           {
                            'id'     : 'sec_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                            'onClick' : 'txtBoxFun(this,'+counter+')'
                          });

    var txtBox3 = $('<input />', 
                           {
                            'id'     : 'sum_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                          });

 $(txtBoxDiv).append(txtBox1).append(txtBox2);
 $(txtBoxDiv).append(txtBox3);
});

function txtBoxFun(obj, count)
{
   var idGet = $(obj).attr('id');
   var idArr = new Array();
   idArr = idGet.split("_");
   if(idArr[0] == "fst")
   {
      var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#sec_textbox_"+count).val()));
   }
   else if(idArr[0] == "sec")
   {
      var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#fst_textbox_"+count).val()));
   }
   $("#sum_textbox_"+count).val(sumTxt);

}

回答by Mairaj Ahmad

You can assign a classto all textboxes on which you want to perform keyupevent and than using this classyou can attach the event on elements which have that class. Here is an example

您可以将 a 分配给class要在其上执行keyup事件的所有文本框，然后使用它class您可以将事件附加到具有该事件的元素上class。这是一个例子

var html="";
for (var i = 0; i < 20; i++)
 {
   html += "<input type='text' id='txt" + i + "' class='someClass' />";
 }
 $("#testDiv").html(html);

Attach keyupevent on elements which have class someClass.

keyup在具有 class 的元素上附加事件someClass。

 $(".someClass").keyup(function () {
  alert($(this).attr("id"));
 });