调用动态创建的元素的click事件

Question

I'm pretty new to all things javascript related, and I seem to have got myself in a pickle. I'm creating a site which displays a seating plan of an office. When the page loads, I load data retrieved from the database, into a function that loops through it and creates an anchor for each person.

This is my method:

       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");
            } 
        }

The problem i'm having is where to place the following ajax click event.

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

                    }
                });
            });

I tried placing it after the for loop, but when I click one of the anchor tags the data gets logged to the screen, however, it quickly vanishes. Any suggestions would be great.

Answer 1

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

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

Answer 2

Delegate the event to a static element. Do it for 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

You should try with a live

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

    });
});