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

Question

我在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");


            });

            });     

}});

};

它很好地填充了html，但當我點擊鏈接時 - 沒有任何反應，我沒有看到警報消息。 這里有什么問題？

Answer 1

因為upcomingText已經是a 。 而你正在努力尋找一個a在你的a 。

你可以這樣寫：

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

當你寫var variable = $('<a ...>...</a>'); ，結果是給定html的根標簽。 所以在你的情況下， <a> 。

Answer 2

因為upcomingText是<a>並且在此標記中沒有任何<a>標記，所以你需要像這樣使用upcomingText

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

但在這種情況下event delegation更好的解決方案

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

Answer 3

嘗試在#upcomingTexts塊上使用delegate函數

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