Как добавить пользовательские поля метабокса с помощью jQuery в посте

Я пытаюсь добавить пользовательский мета-блок в сообщение программным путем, но js выдает ошибку, цель состоит в том, чтобы, когда я нажимаю кнопку добавления, появляется тот же текстовый блок, который был добавлен ранее. Мой код для создания пользовательского метабокса в файле function.php в двадцать семнадцатой теме:

// including custom js files here
function wptuts_scripts_with_jquery() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/myjs.js', array( 'jquery' ));
}
add_action( 'admin_enqueue_scripts', 'wptuts_scripts_with_jquery' );

// starting custom meta box
add_action( 'add_meta_boxes', 'm_param_meta_box_add' );
function m_param_meta_box_add() {
    add_meta_box( 'm_param_post', 'Box Title', 'm_param_post_meta_box_cb', 'post', 'normal', 'high' );
}

function m_param_post_meta_box_cb( $post )
{
    $values = get_post_custom( $post->ID );
    if ( isset( $values['m_meta_description'] ) ) {
        $m_meta_description_text = esc_attr( $values['m_meta_description'][0] );
    }
    wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );

?>

<div id="info"></div>
    <label> Name: </label>
    <textarea rows="1" cols="20" name="m_meta_description" ><?php echo $m_meta_description_text; ?></textarea>

    <button type="button" name="add" id="add">Add</button><br><br>

<?php
} // close m_param_post_meta_box_cb function

add_action( 'save_post', 'cd_meta_box_save' );
function cd_meta_box_save( $post_id )
{
    // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;

    // Make sure your data is set before trying to save it
    if( isset( $_POST['m_meta_description'] ) ) {
        update_post_meta( $post_id, 'm_meta_description', wp_kses( $_POST['m_meta_description']) );
    }     
}

моя ошибка в коде js: "Uncaught TypeError: $ не является функцией в myjs.js: 2"

мой код JS:

// <script type="text/javascript">
        $(document).ready(
            function(){
                $("#add").click(function(){
                    $("#info").append('fname<input type="text" name="name[]">');
                })
            }
        );
    // </script>

3 ответа

Решение

Попробуйте использовать это:

    jQuery(document).ready(
        function(){
            jQuery("#add").click(function(){
                jQuery("#info").append('fname<input type="text" name="name[]">');
            })
        }
    );

Согласно этой статье, когда jQuery WordPress загружается, он использует режим совместимости, который является механизмом для предотвращения конфликтов с другими языковыми библиотеками:

Это сводится к тому, что вы не можете использовать знак доллара напрямую, как в других проектах. При написании jQuery для WordPress вам нужно использовать вместо этого jQuery.

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

jQuery(document).ready(function ($)
{
    $("#add").click(function(){
        $("#info").append('fname<input type="text" name="name[]">');
    })
})

устранение необходимости писать jQuery везде вместо $

Даже в самом начале вы можете удалить JQuery и поместить "$"

$(document).ready(function ($)
{
    $("#add").click(function(){
        $("#info").append('fname<input type="text" name="name[]">');
    })
})
Другие вопросы по тегам