JQuery 连接到不触发的正确处理程序

Question

我似乎无法在每一行中找到控件。这些行是使用 addrow() 方法添加的，该方法效果很好，只需要一些化妆品。我的目标是在更改选择选项时连续获取每个控件的值。但是，该函数永远不会触发，我无法获取该行控制值。

HTML

<table class="table table-bordered table-framed" id="seconDTableAdd" style="display:block;height: 100%;">
                        <tbody>
                            <tr class="AddBookmarksMenuHere">
                                <td style="width: 65%;">
                                    <input type='text' id="txtTitle"  class="txtTitleStyle" style=" width: 150px; padding - top: 1px; height: 20px; font - size: 10px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; " />
                                                                       </td>
                                <td style="width: 15%;">
                                    <select name="ParentRank" onchange="getSelectValue()" class="ParentRankClass">
                                        <option value="P1">P1</option>
                                        <option value="P2">P2</option>
                                    </select>
                                </td>
                                <td style="width: 15%;">
                                    <select name="ChildRank" class="ChildRankClass" onchange="getSelectValue();">
                                          <option value="c1">C1</option>
                                        <option value="c2">c2</option>
                                    </select>
                                </td>
                                <td style="width: 5%;"><a onclick="AddRow('seconDTableAdd')">+</a></td>
                            </tr>
                            </tbody>
                    </table>

jQuery

  <script>

  $(".ChildRankClass").on('change', 'select', function (e) {

            var a = $(this).closest("tr").find("input[type=text][name=txtTitle]").val();
            var b = $(this).closest('tr').find('.txtTitleStyle').val();
            alert(a);
            alert(b);
        })


    function AddRow(tableID) {
    var i = 2;
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);


        var Parentarray = ["P1", "P2", "P3", "P4", "P5"];
        var childarray = ["", "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "C10"];


        var cell1 = row.insertCell(0); //chekbox
        var element1 = document.createElement("input");
        element1.type = "text";
        element1.setAttribute("name", "txtTitle");
        element1.setAttribute("class", "txtTitleStyle");
        element1.setAttribute("Style", "width: 150px; padding - top: 1px; height: 20px; font - size: 10px; color: #555555; vertical - align: left; background - color: #ffffff; 1px solid #cccccc; border - radius: 1px; ");
        cell1.appendChild(element1);


        var cell2 = row.insertCell(1); //item
        var element2 = document.createElement("SELECT");
        element2.setAttribute("name", "ParentRank");
        element2.setAttribute("class", "ParentRankClass");
        element2.setAttribute("Style", "font - size: 10px; ");
        cell2.appendChild(element2);



        var cell3 = row.insertCell(2); //price
        var element3 = document.createElement("SELECT");
        element3.setAttribute("name", "ChildRank");
        element3.setAttribute("class", "ChildRankClass");
        //element3.setAttribute("onchange", "getSelectValue()");
        element3.setAttribute("Style", "font - size: 10px;");

        cell3.appendChild(element3);

        var cell4 = row.insertCell(3); //qty
        var element4 = document.createElement("a");
        var linkText = document.createTextNode("-");
        element4.appendChild(linkText);
        element4.title = "Remove Row";
        element4.href = "http://example.com";
        cell4.appendChild(element4);


        //Create and append the Parent options
        for (var i = 0; i < Parentarray.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value", Parentarray[i]);
            option.text = Parentarray[i];
            element2.appendChild(option);
        }


        //Create and append the Child options
        for (var i = 0; i < childarray.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value", childarray[i]);
            option.text = childarray[i];
            element3.appendChild(option);
        }
  }
 </script>

Answer 1

你必须这样写。动态生成的元素，您不能在其上设置任何事件处理程序，因为类ChildRankClass 稍后会生成。每次 tbody 都会出现。因此，您必须将事件处理程序附加到它。

 $("tbody").on('change', '.ChildRankClass', function () {
        var a = $(this).closest("tr").find("input[type=text][name=txtTitle]").val();
        var b = $(this).closest('tr').find('.txtTitleStyle').val();
        alert(a);
        alert(b);
    })

Answer 2

您应该使用像.click 这样的事件处理程序来添加新行，否则您的代码将无法找到该函数。 Here 是对此问题的更好描述。您可以在here 找到示例的工作演示。