javascript - Ajax 追加后 anchor 文本落在 <a> 标记之外

Question

我正在通过 Ajax 从 URL 加载内容并将内容附加到容器中。附加内容时， anchor 文本位于 <a></a> 之外标签。

一切都正确附加，并且请求的 URL 上的代码绝对没问题。

// url: https://example.com/index.html

<div class="data-row__classes data-row__item">
    <img src="http://localhost/wp-content/uploads/2017/10/english.png" alt="icon">
    <span><a href="http://localhost/classes/english/" class="anchor">English</a></span>
</div>

// appended HTML after ajax request to https://example.com/index.html

<div class="data-row__classes data-row__item">
    <img src="http://localhost/wp-content/uploads/2017/10/english.png" alt="icon">
    <span><a href="http://localhost/classes/english/" class="anchor"></a>English</span>
</div>
// note the malformed anchor tag 2 lines above

我不知道该如何描述这一点；但我在网上找不到此问题的任何其他实例。 HTML 标记在请求的页面上绝对没问题；有谁知道什么可能会扰乱它？具体是链接，没有别的吗？

完全 Ajax

$('.class-table__nav__favorites').on('click', function(e) {
    var class_table_height = $('.class-table__results').outerHeight();
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
        $.ajax({
            url: cml_theme.ajaxurl,
            type: 'get',
            data: {
                action: 'favorites_only_off',
                paged: $('.class-table__foot__nav').data('page')
            },
            beforeSend: function(result) {
                $('.class-table__results').css('height', class_table_height);
                $('.class-table__results').empty();
                $('.class-table__results').append('<div class="class-table__loading"></div>');
            },
            success: function(result) {
                $('.class-table__results').css('height', 'auto');
                $('.class-table__loading').remove();
                $('.class-table__results').append(result);
                $('.class-table__foot').show();
            }
        });
    }
});

从 WordPress 操作“favorites_only_off”中获取的代码与上面示例网址 (example.com/index.html) 中的描述完全相同。

Answer 1

上一个 <a> 中的 HTML 格式错误用 <a href="" ... /> 关闭开始标签而不是<a href="" ... >