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

我对所有与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");
            } 
        }

---

我试着把它放在for循环之后，但是当我点击其中一个锚标记时，数据会被记录到屏幕上，然而，它很快就消失了。任何建议都很好。

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

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

---

将事件委托给静态元素。对

主体执行此操作

：

$('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) {

        }
    });
});

---

你应该试着用一个活的

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

    });
});

---

对于动态添加的事件，

.on（）

必须附加到父容器。例如：

$（“#容器”）.on（'click'，'.deskBtn'，function（）{}）

您也可以使用事件创建元素：

var$el=$（“”，{class:'deskBtn'，click:function（）{}}）

Hi-Jared，我在循环中添加了click事件，但是当我单击其中一个链接时，会显示用户数据，但是，它会很快消失，并且不会进行ajax调用就在函数关闭之前。否则，浏览器将尝试跟随链接

href

，在本例中，该链接留空表示再次尝试加载相同的页面URL。如果将

href='

更改为

href='#'

，您会发现

$。ajax

会激发。工作非常完美！谢谢。虽然从1.7起，

.live（）

已被弃用，并被

.on（）

取代，但这是一个好主意

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

    });
});