Question

I am loading content from a URL through Ajax and appending the content to a container. When the content is appended, the anchor text falls outside of the <a></a> tag.

Everything is appending correctly, and the code on the URL requested is absolutely fine with no issues.

// 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

I am not sure exactly how to describe this; but I can't find any other instances of this problem online. The HTML markup is absolutely fine on the requested page; does anyone know what may be scrambling it? Specifically the link and nothing else?

Full 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();
            }
        });
    }
});

The code which it takes from the WordPress action: 'favorites_only_off' is exactly as described above with the example url (example.com/index.html).

Answer 1

以前的<a>格式错误的HTML会使用<a href="" ... />代替<a href="" ... >

关闭开始标记

锚文字落在<a> tag after Ajax append

1 个答案: