jQuery從動態生成的輸入框獲取價值？

Question

我想從tr標記內的動態生成的輸入框中提取值。 但是由於某種原因，我遇到了錯誤，並且該值變得不確定。 我可能做錯了什么？ 我對Jquery比較陌生。 所以，我想知道我在哪里做錯了。

index.js

       function dynamic_children() {
    $(function () {
        var no = $('#number_children').val()
        $('#id_children-TOTAL_FORMS').val = no

        children_added = $('#children_td_table tr').length
        remaining = 4 - children_added

        //determine if the no of children input are more than those left
        if (no > remaining) {
            //show alert that max children reached
            $('max-children').show()
            setTimeout(function () {
                $('max-children').hide()
            }, 3000);
        } else if (no < children_added) {

            no_to_remove = children_added - no
            for (i = 0; i < no_to_remove; i++) {
                $('#children_td_table').children().last().remove();
            }

        }
        else {
            for (var i = 0; i < remaining && i < no; i++) {
                no_ = i + 1
                $('#children_td_table')
                    .append($('<tr>')
                        .append('<td>' + no_ + '</td>')
                        .append($('<td>')
                            .append($('<input>')
                                .addClass('Input-text')
                                .attr('name', 'children-' + i + '-child_name')
                                .attr('id', 'children-' + i + '-child_name')

                            )



                        )
                        .append($('</td>'))
                        .append($('<td>')
                            .append($('<input>')
                                .addClass('Input-text')
                                .attr('name', 'children-' + i + '-child_dob')
                                .prop('type', 'date')
                                .prop('class', 'children-' + i + '-child_age')
                                .change(function () {
                                    d = new Date($(this).val());
                                    var before = moment($(d, 'YYYY-MM-DD'));
                                    var age = moment().diff(d, 'years');
                                    age_id_name = "#" + $(this).attr('class')
                                    $(age_id_name).val(age);
                                })
                            ))
                        .append($('</td>'))
                        .append($('<td>')
                            .append($('<input>')
                                .addClass('Input-text')
                                .attr('id', 'children-' + i + '-child_age')
                                .attr('name', 'child')
                                .prop('type', 'text')
                            ))
                        .append($('</td>'))
                    )
                    .append($('</tr>'))
            }

        }


        //
        // for (var i = 0; i < no && i < 4; i++) {
        //
        //
        //     $("#delete_row").click(function () {
        //         if (i > 1) {
        //             $("#addr" + (i - 1)).html('');
        //             i--;
        //         }
        //     });
        // }
    })
}

---

function savechildinfo(){
    var numofchildren = $("#number_children").val();
    console.log("CHildrennumber",numofchildren);
    var tr = $("#children_td_table").closest('tr');



    for(var i =0;i<numofchildren;i++){
        var c = "children-"+i+"-child_name";
        var d = tr.find(c).val();

        console.log("childrenname",d);


    }
}

Answer 1

很難理解和閱讀您的代碼，但是我在下面重點介紹您的問題。

首先，不需要使用closest只需將$("#children_td_table")單獨用於var tr 。 其次，如果您想通過ID查找var c則忘了添加# ，因此應使用var c = "#children-" + i + "-child_name";

 var i = 1; var no_ = '123' // just for fix the error $('#children_td_table') .append($('<tr>') .append('<td>' + no_ + '</td>') .append($('<td>') .append($('<input type="text"/>') .addClass('Input-text') .attr('name', 'children-' + i + '-child_name') .attr('id', 'children-' + i + '-child_name') .val('test') // remove this later )) .append('</td>') .append('</tr>') ); savechildinfo(); // I execute this on load function savechildinfo() { var numofchildren = 2; // just for fix the error console.log("CHildrennumber", numofchildren); var tr = $("#children_td_table"); // remove closest for (var i = 0; i < numofchildren; i++) { var c = "#children-" + i + "-child_name"; // -----^ add # var d = tr.find("#children-" + i + "-child_name").val(); console.log("childrenname", d); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="children_td_table"></table>