如何获取jQuery中动态创建的文本框的动态ID

我想通过文本框ID执行keyup事件，并且所有文本框都是使用onclick按钮事件动态创建的.为此，我必须使20键功能.如果我使用20 keyup函数，那么我的代码将变得太冗长和复杂.而不是我想对所有文本框使用通用功能.有人可以建议我该怎么做..谢谢

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

这是我要解决的问题:

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