为什么我的find（'a'）在jquery中不起作用？

Question

I have a function in jquery:

function handleUpcomingUserTexts () {

$.ajax({
    url: 'getjson.php', 
    type: "POST",
    data: {
        mail: '<?php echo htmlentities($_SESSION["email"]); ?>'
    },
    dataType:'text',
    success: function(ans)
    {
        var data = JSON.parse(ans);

        $.each(data, function(i, v) {

            var upcomingText = $('<a href="#" class="list-group-item"><i class="fa fa-comment fa-fw"></i> '+v.Content+'<span class="pull-right text-muted small"><em>'+v.Date+'</em></span></a>');


            $('#upcomingTexts').append(upcomingText);


            var a = upcomingText.find('a').on('click',function(e){

                e.preventDefault();
                alert("here");


            });

            });     

}});

};

and it fills the html nicely, but when I click the link - nothing happens and I don't see the alert message. What is wrong in here?

Answer 1

Because upcomingText is already a a . And you are trying to find a a in your a .

You can just write this :

var a = upcomingText.on('click',function(e){

When you write var variable = $('<a ...>...</a>'); , the result is the root tag of the given html. So in your case, the <a> .

Answer 2

Because upcomingText is <a> and in this tag there are not any <a> tags, so you need use upcomingText like this

upcomingText.on('click',function(e) {});

but event delegation in this case better solution

// add this code before $.ajax
$('#upcomingTexts').on('click', 'a.list-group-item', function(e) {});

Answer 3

Try to use delegate function, on #upcomingTexts block

$('#upcomingTexts').delegate('a', 'click', function(e){
    //your code here
});