I cannot do any jQuery on an Anchor Class within a popup

Question

I have a link within a popup box, that has a class. When I attach a function to this link (with .click() or others) nothing happens.

I have the following code (sorry there's a quite a bit of it, but I wanted to be thorough to get the potential answer)...

    $(".comment-lkes").hover(function(e){
    var HTMLbuild = "";
    var userNameURL = "/user.php?u=";
    var commentID = parseInt($(this).parents("li").attr("data-commentid"),10);

    //fire off AJAX with the comment_ID to get the usernames of the likes
    $.ajax({
        url: "AJAX_commentlikes_JSON.php",
        type: "POST",
        cache: false,
        dataType: "json",
        data: {
            cid: commentID
        }
    }).done(function(data) {
        var HTMLbuild = "";
        HTMLbuild += '<ul class="userNameList">\n';

        $.each(data, function( index, value ) {
            var username = value.user_name;
            HTMLbuild += '<li>';
            HTMLbuild += '<a href="' + userNameURL + username + '" target="_blank" class="popupuser">' + username + '</a></br>'; 
            HTMLbuild += "</li>\n";
        });

        HTMLbuild += '</ul>';
        $("#pop-up").html(HTMLbuild);

        $('div#pop-up').show()
    });
}, function () {
    if (moveFlag === false) {
        $('div#pop-up').hide();
    }
});

$('.comment-lkes').mousemove(function (e) {
    if (moveFlag === false) {
        $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    }
});

$('.comment-lkes').click(function (e) {
    event.preventDefault();
    if (moveFlag === false) {
        moveFlag = true;
        $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    } else {
        moveFlag = false;
        $("div#pop-up").hide();
    }
});

$('.popupuser').click(function () {
    alert("clicked");
    event.preventDefault();
});

So, the popup box successfully displays, the CSS is below

#pop-up {
  z-index: 99999;  
  display: none;
  position: absolute;
  width: 280px;
  padding: 2px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

The AJAX successfully generates the HTML, the popup box successfully displays all the usernames, and when the link is clicked, it takes the user to a new tab to the correct page. However, none of the jQuery for $('.popupuser').click(function () { does anything. As in, the alert does not display and the link goes through.

I have tried various methods to fix this, I'm at a loss as to why this is happening. Any help would be thoroughly appreciated...

score 0 · Answer 1 · answered Jul 28 '14 at 19:33

0

Since you are dealing with the response of AJAX, use live() method -

$('.popupuser').live('click', function () {});

answered Jul 28 '14 at 19:33

Domain

11,562
3
23
44

Thank you for teaching me this function, however, this still doesn't solve the problem I am afraid. As I understand it, everything is drawn up, it will only write the HTML to the popup once the AJAX is `.done()` ? I have a gut feeling that it's because it;s within so many DIVs and other classes, or because it's within something with CSS with such a high `z-index` that this is causing the issues. Alas, I am guessing and tearing hair out still. – themrflibble Jul 28 '14 at 19:49
also, changing it to .on() does nothing as .live() is now deprecated – themrflibble Jul 28 '14 at 19:51

score 0 · Accepted Answer · edited May 23 '17 at 10:33

Thanks to another post, and the clue given by WisdmLabs, I got there, I'll explain my process.

If I copied the jQuery into the console, it worked. So I figured it must be something to do with the .class not existing when the page is loaded, as jQuery creates some code and then plonks it into the DOM.

Jquery Event won't fire after ajax call

The above link sorted it for me, so now my code is...

$('body').on('click','.popupuser',function(){
    alert("clicked popupuser");
    event.preventDefault();
});

I cannot do any jQuery on an Anchor Class within a popup

2 Answers2