如何在 post 中附加带有 jQuery 的自定义元数据框字段

Question

我正在尝试以编程方式在 post 中添加自定义元框，但 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: $ is not a function 在 myjs.js:2"

我的js代码是：

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

Answer 1

试试这个：

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

根据this文章，加载WordPress的jQuery时，它使用兼容模式，这是一种避免与其他语言库冲突的机制：

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead.

Answer 2

虽然是正确的，但值得一提的是，您也可以这样做

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

无需在任何地方写 jQuery 而不是 $

Answer 3

即使在开头，您也可以删除 JQuery 并放置一个“$”

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

如何在 post 中附加带有 jQuery 的自定义元数据框字段

How to append custom metabox fields with jQuery in post

jquery

wordpress

meta-boxes