JQuery连接到正确的处理程序，但未触发

Question

我似乎找不到每一行的控件。这些行是用addrow（）方法添加的，该方法非常有效，只需要一些化妆品。我的目标是在更改select选项时获取行中每个控件的值。但是，该函数从未启动，我无法获得该行的控制值。

超文本标记语言

<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

您应该使用类似的事件处理程序。单击添加新行，否则代码将无法找到函数。以下是对该问题的更好描述。你可以在这里找到你的样品的工作演示。

Answer 2

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

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