在 javascript 中的 "responsive" 下拉项上创建点击事件

Question

我有一个 maven 项目并通过来自数据库的 spark get-call 获取用户：

    function allUsers(){
        $.ajax({
            dataType: 'json', //to parse string into JSON object
            type: 'GET',
            url: 'webAthen/api/users',
            success: function (data){
                $('.userDropdown').html("");

                for(i=0; i < data.length; i++){
                   $('.userDropdown').append("<option>" + data[i].userName + "</option>");
                }
            }
        });
    }

知道如果我在 Dropbox 中单击这样的用户，我希望该用户的信息正确显示在标签中，例如：

$('.userDropdown').val().click(function(){
        alert($('.userDropdown').val() + " was clicked :-)");

});

我插入了警报以获取带有被点击的用户名的警报，但它根本不起作用。如果您需要更多代码，请告诉我！我已经用谷歌搜索并找到了一些具有坚定价值观的例子。但是我的下拉条目是从数据库中动态获取的。

Answer 1

看了你的代码，我觉得，option 标签是动态创建的。所以新创建的 options/elements 不受 Click 监听器的约束。

$(document).on("click", ".userDropdown > option", function(){
        // Your code...
});

以上代码会先监听document的onClick事件，然后再缩小到目标元素。

在 javascript 中的 "responsive" 下拉项上创建点击事件

Make click-event on "responsive" dropdown item in javascript

html

javascript

click

maven