jquery внутри настраиваемого блока wordpress ACF не может выбрать элемент вне блока

У меня есть расширенный шаблон блока Gutenberg с настраиваемыми полями, например:

<article class="m04x">
    <hr>
    <div class="row">
        <div class="col-md-12">
            <h4>On this site:</h4>
            <ol id="anchor_list">
            </ol>
        </div>
    </div>
</article>

<script>

    (function($) {
        var anchor_list = $('#anchor_list');
        $('.anchor-block').each(function() {
            var heading_text = $(this).html();
            var href = '#' + $(this).attr('id');
            var html = '<li class="nav-item"><a class="fontstyle" href="' + href + '">' + heading_text + '</a></li>';
            anchor_list.append(html);
        });
    })(jQuery);

</script>

Зарегистрировано с использованием:

function register_on_this_site_block() {
    if ( function_exists( 'acf_register_block' ) ) {
        acf_register_block(array(
            'name'            => 'on-this-site-block',
            'title'           => __( 'On This Site Block', 'wds'),
            'description'     => __( 'Links to parts of current page.', 'wds'),
            'render_template' => get_template_directory() . '/template-parts/blocks/on_this_site.php',
            'category'        => 'layout',
            'icon'            => 'align-center',
            'mode'            => 'preview',
            'keywords'        => array('links'),
        ));
    }
}
add_action( 'acf/init', 'register_on_this_site_block' );

JQuery может выбрать "#anchor_list", по-видимому, потому что он находится в том же шаблоне. Но при выборе '.anchor-block' он возвращает объект с длиной 0, а функция 'each' ничего не делает.

Как я могу получить доступ к элементам вне этого блока? На самом деле следует упомянуть, что элемент .anchor-block находится в другом настраиваемом блоке ACF.


javascript wordpress jquery advanced-custom-fields wordpress-gutenberg
person ThriceGood    schedule 20.03.2019    source источник
comment
$('.anchor-block') выполняет глобальный селектор для всего документа, поскольку документ существует в этот момент времени. Если селектор возвращает 0, в данный момент не существует элемента, соответствующего этому селектору.   -  person Taplar    schedule 20.03.2019
comment
ACF загружает поля через ajax, поэтому вам нужно выбрать блок привязки # в обратном вызове, чтобы он не вызывался, пока поля не появятся.   -  person circusdei    schedule 20.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Как сказал Таплар, элементы, которые я выбирал, не существовали в то время, когда я пытался их выбрать. Я думал, что моя функция (function($) { })(jQuery) запущена после полной загрузки страницы, но на самом деле это не так. Я изменил код на этот, и он работает:

    var $ = (jQuery);
    $(window).bind("load", function() {
        var anchor_list = $('#anchor_list');
        $('.anchor-block').each(function() {
            var heading_text = $(this).html();
            var href = '#' + $(this).attr('id');
            var html = '<li class="nav-item"><a class="fontstyle" href="' + href + '">' + heading_text + '</a></li>';
            anchor_list.append(html);
        });
    });

Хотя вы можете увидеть пустой список на долю секунды, прежде чем он заполнится элементами <li>, но для меня это нормально.

person ThriceGood    schedule 21.03.2019