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

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 index not select 。 尝试

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

Answer 2

要进一步阅读，请查看https://api.jquery.com/index/

“如果没有参数传递给.index（）方法，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置。”

在您的HTML中，这是唯一的元素，因此始终返回“ 0”。

正如@Azim指出的那样，如果使用，它可能会起作用。