如何在Wordpress的自定义小部件中使用jQuery动态添加输入字段（代码下方）？它包含一些php代码，我已经尝试了很多方法，但无法使其工作：
<input type="text" name="<?php echo $this->get_field_name('ctitle');?>[]" placeholder="Enter title here"/>
<?php
/* It working for me please try below code */
/* Handle the meta box saving */
global $post, $wpdb;
?>
<tr>
<th><?php esc_html_e("Add User", 'textdomain');?></th>
<td>
<?php $user_data = get_post_meta($post->ID, 'user_data', true); ?>
<div class="user_main_wrapper">
<?php if(!empty($user_data)){
foreach($user_data as $key_user=>$val_user){?>
<div id="show_1" class="show_inline_section">
<p><?php esc_html_e("Name:", 'textdomain');?></p>
<input style="width: 30%;" type="text" name="user_data[user_name][]" value="<?php echo !empty($val_user['user_name'])?$val_user['user_name']:'' ?>" placeholder="Enter User Name"/>
<p><?php esc_html_e("DOB:", 'textdomain');?></p>
<input style="width: 30%;" type="date" name="user_data[user_dob][]" value="<?php echo !empty($val_user['user_dob'])?$val_user['user_dob']:'' ?>" placeholder="DOB"/>
<a class="player_remove_button button" id="removebtn_<?php echo $key_user?>" style="margin-left: 11px;"><?php esc_html_e("Remove", 'textdomain');?></a>
</div>
<?php }
}
else{
?>
<div id="show_0" class="show_inline_section">
<p><?php esc_html_e("Name:", 'textdomain');?></p>
<input style="width: 30%;" type="text" name="user_data[user_name][]" value="" placeholder="Enter User Name"/>
<p><?php esc_html_e("DOB:", 'textdomain');?></p>
<input style="width: 30%;" type="date" name="user_data[user_dob][]" value="" placeholder="DOB"/>
</div>
<?php
}
?>
</div>
<a class="pt-5 player_add_button button" title="Add field"><?php esc_html_e("Add More", 'textdomain');?></a>
</td>
</tr>
<?php
/*Save data for update_post_meta*/
add_action('save_post_userdata', 'userdata_save_custom_box', 10, 2); // userdata is post type slug
function userdata_save_custom_box($post_id, $post)
{
$userdata = [];
if (isset($_POST['user_data'])) {
foreach($_POST['user_data']['user_name'] as $k => $user_name){
if(!empty($user_name)){
$userdata[] = [
'user_name' => $user_name,
'user_dob' => $_POST['user_data']['user_dob'][$k]
];
}
}
update_post_meta($post_id, sanitize_key('user_data'), $userdata);
}else{
update_post_meta($post_id, sanitize_key('user_data'), $userdata);
}
}
?>
<script type="text/javascript">
jQuery(document).ready(function() {
var holder = < ? php echo isset($key_user) ? $key_user : 0; ? >
// var maxField = 10; //Input fields increment limitation
var addButton = jQuery('.player_add_button'); //Add button selector
var wrapper = jQuery('.user_main_wrapper'); //Input field wrapper
var initial_cast = < ? php echo(isset($user_data['user_data'][0]) && count($user_data['user_data'][0]) > 0 ? count($user_data['user_data'][0]) : 1) ? > ; //Initial field counter is 1
function fieldHTML(count) {
return '<div id="show_' + count + '" class="show_inline_section"><p>Name:</p><input style="width: 30%;" type="text" name="user_data[user_name][]" value="" placeholder="Enter User Name"/> <p>DOB:</p><input style="width: 30%;" type="date" name="user_data[user_dob][]" value="" placeholder="DOB"/> <a class="player_remove_button button" id="removebtn_' + count + '" style="margin-left: 11px;">Remove</a></div>'; //New input field html
}
//Once add button is clicked
jQuery(addButton).click(function() {
holder = holder + 1; //Increment field counter
jQuery(wrapper).append(fieldHTML(holder)); //Add field html
});
//Once remove button is clicked
jQuery(wrapper).on('click', '.player_remove_button', function(remove_field) {
remove_field.preventDefault();
jQuery(this).parent('div').remove(); //Remove field html
});
});
</script>