Question

我对javascript相关的所有内容都很陌生，而且我似乎已经陷入了困境。我正在创建一个显示办公室座位计划的网站。当页面加载时，我将从数据库中检索到的数据加载到循环遍历它的函数中，并为每个人创建一个锚点。

这是我的方法：

       function getDesks(coordsArr) {
            for (var i = 0; i < coordsArr.length; i++) {
                var element = $("<a href='' class='deskBtn' data-name='" + coordsArr[i].UserName + "'>.</a>");
                $(element).css({
                    "top": coordsArr[i].DeskYCoord,
                    "left": coordsArr[i].DeskXCoord
                }).appendTo(".map");
            } 
        }

我遇到的问题是放置以下ajax点击事件的位置。

  $('.deskBtn').on('click', function () {
                var user = $(this).attr("data-name");
                console.log(user);

                $.ajax({
                    url: "/Home/GetUserData",
                    type: "GET",
                    data: {user: user},
                    success: function (data) {

                    }
                });
            });

我尝试将它放在for循环之后，但是当我单击其中一个锚标记时，数据会记录到屏幕上，然而，它会很快消失。任何建议都会很棒。

Answer 1

为什么不能在for循环中添加处理程序？

$(element).on('click', function() { ... })

Answer 2

将事件委托给静态元素。为body：

执行此操作

$('body').on('click', '.deskBtn', function () {

    var user = $(this).attr("data-name");
    console.log(user);

    $.ajax({
        url: "/Home/GetUserData",
        type: "GET",
        data: {user: user},
        success: function (data) {

        }
    });
});

Answer 3

您应该尝试使用

$(document).ready(function(){
    $('.deskBtn').live('click', function(){

    });
});

调用动态创建的元素的单击事件

3 个答案: