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

问题描述

我似乎不能不在每行中找到控件。 这些行通过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>

您应该使用的事件处理程序一样.click要添加新行，否则你的代码无法找到该功能。 是此问题的更好描述。 您可以找到示例的工作演示。