Question

我在尝试更新动态生成的span对象的文本时遇到问题（用户单击以更新范围的链接）。当单击封装了span的链接时，我会触发一个AJAX调用，比如Photo，它会更新数据库中的“like”计数并返回新的类似计数。这是按钮和跨度的代码 - 就像我说这是动态生成的。

<a href="javascript:void(0);" id="LikeButton.7" name="LikeButton.7" class="like-button"><span class="badge" style="background: #f05f40;">1 Likes</span></a>

这是捕获链接点击事件并触发likePhoto功能的代码。

$('body').on('click', 'a.like-button', function () {
    var id = this.id.replace('LikeButton.', '');
    likePhoto(id);
});

这是进行AJAX调用并尝试更新span的javascript代码。

function likePhoto(id) {
    $.ajax({
        url: '/Ajax/LikePhoto',
        type: 'POST',
        dataType: 'json',
        data: { photoId: id },
        success: function (data) {
            var likeButton = '#LikeButton.' + id + ' span.badge';
            var value = data + ' Like';
            if (data > 1) value += 's';
            $(likeButton).text(value);
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.status);
            alert(xhr.responseText);
            alert(errorThrown);
        }
    });
}

除了更新的类似值之外，所有内容似乎都运行正常。我认为问题是一行

$(likeButton).text(value);

应该更新跨度的文本。

我希望第二双眼睛看一眼。

谢谢！

Answer 1

问题在于选择器中的.字符。您当前的选择器正在查找同时具有id LikeButton的元素以及id值提供的类别的元素。相反，您需要使用.转义\\以防止jQuery将其用作类运算符。试试这个：

var likeButton = '#LikeButton\\.' + id + ' span.badge';

更新动态生成的span对象上的文本

1 个答案: