动态创建下拉更改功能答案

【问题标题】：Dynamically created drop down on change function动态创建下拉更改功能
【发布时间】：2014-10-01 11:53:12
【问题描述】：

我在添加输入和下拉列表时动态创建了表...

使用 ajax，我得到下拉列表的 json 值，并将其分配给某个变量：

var s = $('<select />');

$.each(obj1, function (value, obj) {
    $('<option />', { value: obj.Value, text: obj.Text }).appendTo(s);
});

稍后我将行添加到我的表中：

$("#tblData tbody").append("<tr>" +
    "<td><input type='text' style=\"width:180px\" class=\"phone\"/></td>" +
    "<td><input type='text' style=\"width:180px\"/></td>" +
    "<td><input type='text' style=\"width:180px\"/></td>" +
    "<td style=\"overflow: hidden;\"><select style=\"width:212px\" class=\"dialog\">" + s.html() + "</ select></td>" +
"</tr>");

这是一些按钮点击，每次点击我都会添加一行。这项工作很完美。（我用 3 个输入和一个下拉列表生成新行）。

我不知道也找不到的部分是如何在我的下拉更改（同一行）中更改某些输入值。（如果我有 5 行，并且我在第三行更改下拉菜单，我想在第三行更改一些输入）。

我开始：

    $(".partnerTable tbody").on("click", "tr", function (e) {
            alert($(this).find(".phone").val());
    });

这是我尝试查看对点击的行响应是否。(partnerTable) 是我的表的类。我得到了每一行的响应，这是很好的部分。

但现在的问题是如何在下拉更改中进行此操作。

我尝试以下方法：

$(".partnerTable tbody").on("click", "tr", function (e) {
    $(this).find("dialog").change(function () {
        alert($(this).find(".phone").val());
    });
});

但这不起作用。有可能做这样的事情吗？

感谢

【问题讨论】：

标签： jquery

【解决方案1】：

如果表也是动态创建的，那么这样写：

 $(document).on("change", ".dialog", function (e) {

        // do something

       });

如果表是在 DOM 加载时创建的，你可以这样写：

 $(".partnerTable tbody").on("change", ".dialog", function (e) {

    // do something

   });

你可以试试这个方法：

$(".partnerTable tbody").on("click", "tr", function (e) {
    $(this).on("change",".dialog",function () {

    });
});

【讨论】：