Javascript 如何在jquery中获取动态创建的文本框的动态id

我想通过textboxid执行keyup事件，所有textbox都是通过onclick按钮事件动态创建的。为此，我必须使20键功能。如果我使用20键的功能，那么我的代码将变得太长和复杂。我想为所有textbox使用一个通用函数，而不是这个函数。有人能给我建议怎么做吗谢谢

以下是我为解决这个问题所做的：

<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>

添加预订
$（文档）.ready（函数（）{
var计数器=2；
$（“.add_field_button”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
"总和";；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
功能检查（a、b）{
var first=a；
var第二=b；
var temp=温度；
var novalue=“”；
结果=parseInt（第一个）+parseInt（第二个）；
如果（！isNaN（结果））{
返回结果；
}否则{
返回novalue；
}
}
$（此）.on（“keyup”、“#firsttextbox2”，函数（e）{
e、 预防默认值（）；
var a=document.getElementById（'firsttextbox2'）。值；
var b=document.getElementById（'secondtextbox2'）。值；
var数=2；
结果=检查（a，b）；
document.getElementById（'box2'）。值=结果；
});
$（此）.on（“keyup”、“#firsttextbox3”，函数（e）{
var数=3；
e、 预防默认值（）；
var a=document.getElementById（'firsttextbox3'）。值；
var b=document.getElementById（'secondtextbox3'）。值；
结果=检查（a，b）；
document.getElementById（'box3'）。值=结果；
});
$（此）.on（“keyup”、“#firsttextbox4”，函数（e）{
变量数=4；
e、 预防默认值（）；
var a=document.getElementById（'firsttextbox4'）。值；
var b=document.getElementById（'secondtextbox4'）。值；
结果=检查（a，b）；
final=document.getElementById（'box4'）。value=result；
});
$（此）.on（“keyup”、“#secondtextbox2”，函数（e）{
e、 预防默认值（）；
var a=document.getElementById（'firsttextbox2'）。值；
var b=document.getElementById（'secondtextbox2'）。值；
结果=检查（a，b）；
document.getElementById（'box2'）。值=结果；
});
$（此）.on（“keyup”、“#secondtextbox3”，函数（e）{
e、 预防默认值（）；
var a=document.getElementById（'firsttextbox3'）。值；
var b=document.getElementById（'secondtextbox3'）。值；
结果=检查（a，b）；
document.getElementById（'box3'）。值=结果；
});
$（此）.on（“keyup”、“#secondtextbox4”，函数（e）{
e、 预防默认值（）；
var a=document.getElementById（'firsttextbox4'）。值；
var b=document.getElementById（'secondtextbox4'）。值；
结果=检查（a，b）；
document.getElementById（'box4'）。值=结果；
});
$（此）。在（“单击”，“删除”字段）上，函数（e）{//用户单击删除文本
e、 预防默认值（）；
$（this）.parent（'#target'）.remove（）；
计数器--；
});
});

提供一段代码片段，可能会给您一些提示：

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

}

$（“.add_字段_按钮”）。单击（函数（）
{
如果（计数器>10）
{
警报（“仅允许10个文本框”）；
返回false；
}
var txtBoxDiv=$（“”）；
//创建风险权重
变量txtBox1=$（''，
{
“id”：“fst\U文本框”+计数器，
“名称”：“文本框”+计数器，
“类型”：“文本”，
“类”：“输入字段”，
“onClick”：“txtBoxFun（这个，“+counter+”）”
});
变量txtBox2=$（''，
{
“id”：“sec_文本框”+计数器，
“名称”：“文本框”+计数器，
“类型”：“文本”，
“类”：“输入字段”，
“onClick”：“txtBoxFun（这个，“+counter+”）”
});
变量txtBox3=$（''，
{
“id”：“总和文本框”+计数器，
“名称”：“文本框”+计数器，
“类型”：“文本”，
“类”：“输入字段”，
});
$（txtBoxDiv）.append（txtBox1.append（txtBox2）；
$（txtBoxDiv）.append（txtBox3）；
});
函数txtBoxFun（对象，计数）
{
var idGet=$（obj.attr（'id'）；
var idArr=新数组（）；
idArr=idGet.split（“”）；
如果（idArr[0]=“fst”）
{
var sumTxt=parseInt（parseInt（$（obj）.val（））+parseInt（$（“#sec_textbox_uu”+count）.val（））；
}
否则如果（idArr[0]=“秒”）
{
var sumTxt=parseInt（parseInt（$（obj）.val（））+parseInt（$（“#fst_textbox_u”+count）.val（））；
}
$（“#sum_textbox_uu”+count）.val（sumTxt）；
}

提供一段代码片段，可能会给您一些提示：

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

}

$（“.add_字段_按钮”）。单击（函数（）
{
如果（计数器>10）
{
警报（“仅允许10个文本框”）；
返回false；
}
var txtBoxDiv=$（“”）；
//创建风险权重
变量txtBox1=$（''，
{
“id”：“fst\U文本框”+计数器，
“名称”：“文本框”+计数器，
“类型”：“文本”，
“类”：“输入字段”，
“onClick”：“txtBoxFun（这个，“+counter+”）”
});
变量txtBox2=$（''，
{
“id”：“s”
 $(".someClass").keyup(function () {
  alert($(this).attr("id"));
 });

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

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

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

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