javascript - 动态创建的元素都返回相同的索引

Question

我正在表中动态创建下拉列表，并且尝试获取触发事件的下拉列表的索引，如下所示:

$(".template").on('change', '.dataTypes', function () {
    var selectedDatatype = $(this).find(":selected").val();
    var ix = $(this).index(); // get this index

    $.ajax({
        type: "GET",
        url: "http://localhost...",
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            populateListDropdown("gs", ix, result.Result);
        },
        error: function () { },
        timeout: 120000
    });
});

无论我与哪个下拉列表交互，这段代码总是返回索引 0，我不确定为什么。

HTML(如果有帮助的话)。该页面在启动时加载了一行，并通过单击按钮添加其他行。

<table class="tblColumns">
    <tr>
        <td>
            <div class="column">
                Select DataType :
                <select class="dataTypes"></select>
        </td>
    </tr>
</table>

Answer 1

index() 方法返回基于其同级的索引。您的所有下拉菜单都位于单独的 td 中。所以都有相同的索引。

您正在寻找tr索引而不是select。尝试一下

$(this).closest('tr').index();