【发布时间】：2014-07-10 14:17:01
【问题描述】：
我创建了一个自定义小部件，我想在其中使用 jQuery 动态添加字段。 它会放置字段，但不会添加字段。
希望有人能帮我看看有什么问题
<?php
add_action( 'widgets_init', 'custom_widget');
function custom_widget() {
register_widget( 'custom_widget_info' );
}
class custom_widget_info extends WP_Widget {
function custom_widget_info () {
$this->WP_Widget('custom_widget_info', 'custom_widget', $widget_ops ); }
public function form( $instance ) {
if ( isset( $instance[ 'titel' ]) && isset ($instance[ 'option' ])) {
$titel = $instance[ 'titel' ];
$option = $instance[ 'option' ];
}
else {
$titel = __( '', 'widget_title' );
$option = __( '', 'widget_title' );
} ?>
<p>Titel: <input name="<?php echo $this->get_field_name( 'titel' ); ?>" type="text" value="<?php echo esc_attr( $titel );?>" /></p>
<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;
$('#addNew').live('click', function() {
$('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;
return false;
});
$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
<div id="addinput">
<p>
<input type="text" id="p_new" size="20" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
</p>
</div>
<?php
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['titel'] = ( ! empty( $new_instance['titel'] ) ) ? strip_tags( $new_instance['titel'] ) : '';
$instance['option'] = ( ! empty( $new_instance['option'] ) ) ? strip_tags( $new_instance['option'] ) : '';
return $instance;
}
function widget($args, $instance) {
extract($args);
echo '<div class="footer_item">';
echo $before_widget; //Widget starts to print information
$titel = apply_filters( 'widget_title', $instance['titel'] );
$option = empty( $instance['option'] ) ? ' ' : $instance['option'];
if ( !empty( $titel ) ) { echo $before_title . $titel . $after_title; };
echo $option;
echo $after_widget; //Widget ends printing information
echo '</div>';
} }
?>
我认为这可能与 jQuery 的负载有关，因为它不是通过 enque 脚本加载的，但我不知道如何解决这个问题。我会在谷歌上搜索一下如何解决这个问题。
顺便说一句，如果有一个 JQuery 调试器会很棒。然后我可以看到哪里出错了。 我在 FireBug 中使用 FireQuery，但这并没有告诉我脚本哪里出错了。
谢谢 M.
-更新-更新-更新-更新-更新-更新-更新-更新-更新-更新-更新-
修复了它。 我发现所有元素都是根据它们的 id 调用的。 由于这是 WordPress，并且我正在创建一个小部件，因此原始小部件和我为放置小部件而创建的新实例现在都是双倍的。
还关注我吗？ Wordpress 在与您用于显示数据的小部件相同的页面上显示所有当前小部件的库。 因此，如果 jQuery 依赖于 id，并且 id 只允许使用一次，它将永远无法工作。 考虑到这一点，我将所有内容都更改为类。这可行，但是 jQuery 复制了所有类，因为有两个小部件；每次我单击添加按钮时，它都会复制两个实例。 :-(
所以现在我需要弄清楚如何解决这个问题......
【问题讨论】：