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

Question

我在尝试更新动态生成的跨度对象的文本时遇到问题（就像 link 用户单击以更新跨度一样）。单击封装跨度的 link 时，我触发一个 AJAX 调用，likePhoto，更新数据库中的 'like' 计数和 returns 新的喜欢计数。这是按钮和跨度的代码 - 就像我说的那样，这是动态生成的。

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

下面是捕获 link 的点击事件并触发 likePhoto 函数的代码。

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

这是进行 AJAX 调用并尝试更新跨度的 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

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

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

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

Updating text on a dynamically generated span object

jquery

asp.net-ajax

dynamically-generated