如何获取克隆元素的 id

Question

我已经克隆了一个元素并更改了它们的 id，但无法在 Jquery 中获取克隆元素的 id 有人可以帮忙吗？？

Html View源码如下

 <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>UserName</th>
                        <th>Password</th>
                        <th>Service line</th>
                        <th>Track</th>
                        <th>subtrack</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[0].UserName" type="text" value="Required"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[0].Password" type="text" value="Required"></td>
                        <td>
                            <select class="wrapper-dropdown Service_Line" id="z0__Service_Line" name="[0].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="wrapper-dropdown Track" id="z0__Track" name="[0].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="wrapper-dropdown Sub_Track" id="z0__Sub_Track" name="[0].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                </tbody>
            </table>

在上面的代码中，我通过增加它们的 id 来克隆行 使用下面的 jquery 代码

 $(document).ready(function () {
            /* 1. Initialise our variable to keep count of the rows added */
            var rowcount = 1;

            //Add new row
            $("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#dataTable");
                var $trLast = $tableBody.find("tr:last");

                // 2. Create the new id with the row count
                //var newId = "TemplateRow-" + rowcount;

                // 3. clone the row with our new id
                var $trNew = $trLast.clone(true);

                // 4. rename each input and give an id
                $.each($trNew.find(':input'), function (i, val) {

                    oldName = $(this).attr('name');
                    inputParts = oldName.split(".");

                    // set the  name and id with the base name and rowcount
                    $(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
                    $(this).attr('class', '[' + rowcount + '].' + inputParts[1]);

                    $(this).removeClass("input-validation-error");
                });

                $trLast.after($trNew);
                $("#[" + rowcount + "].Service_Line").change(function () {
                    debugger;
                    $.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
                        $("#[" + rowcount + "].Track").empty();
                        $.each(data, function (index, row) {
                            $("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
                        });
                    });
                })
                rowcount++;
            });
        });

但是在这一行 $("#[" + rowcount + "].Service_Line").change(function () { 我无法从中获取克隆行的 id网页 谁能帮帮我？在此先感谢

克隆时行的service_line id继续增加[1].service_line，[2].service_line，[3].service_line，[4].service_line，等等............我需要在此函数中使用 jquery 获取此 ID

 $("#[" + rowcount + "].Service_Line").change(function () {
                    debugger;
                    $.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
                        $("#[" + rowcount + "].Track").empty();
                        $.each(data, function (index, row) {
                            $("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
                        });
                    });
                })

Answer 1

你没有像你想象的那样设置id，你设置了className和name属性，所以$("#[" + rowcount + "].Service_Line")不会返回任何东西：

您的脚本：

   // set the  name and id with the base name and rowcount
   $(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
   $(this).attr('class', '[' + rowcount + '].' + inputParts[1]);

您可以通过name 属性选择元素，如下所示：

 $("select[name='[" + rowcount + "].Service_Line']").change(function() {); //etc.

Answer 2

 $("select[name='[" + rowcount + "].Service_Line']").change(function () {
            //get the row count of this row using the keyword this, to
            //get the select which fired the event, then use regex
            //to capture the number from the name attribute:
            const thisrow = $(this).attr('name').match(/\[(\d+)\]/)[1];

            $.get("/Users/GetTrackList", { Service_Line_ID: $("select[name='[" + thisrow + "].Service_Line']").val() }, function (data) {
                $("select[name='[" + thisrow + "].Track']").empty();
                $.each(data, function (index, row) {
                    $("select[name='[" + thisrow + "].Track']").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
                });
                debugger;
            });
        })