WordPress 小部件 - JQuery 添加字段按钮 - 触发两次

Question

我正在开发一个 WordPress 小部件，该小部件有一个按钮，当按下它时，它会添加一个新的字段行。由于某种原因，此代码无法 100% 运行。如果我刷新页面然后按下按钮，那么它第一次添加两个字段，然后第二次添加 3 个字段。但是，如果我先单击保存按钮，它会完美运行。有什么想法吗？

 public function form( $instance )
{
    $title = isset ( $instance['title'] ) ? $instance['title'] : '';
    $title = esc_attr( $title );

    printf(
        '<p><label for="%1$s">%2$s</label><br />
        <input type="text" name="%3$s" id="%1$s" value="%4$s" class="widefat"></p>',
        $this->get_field_id( 'title' ),
        'Title',
        $this->get_field_name( 'title' ),
        $title
    );

    $fields = isset ( $instance['fields'] ) ? $instance['fields'] : array();
    $field_num = count( $fields );
    $fields[ $field_num ] = '';
    $fields_html = array();
    $fields_counter = 0;
    print_r($field_num);
    foreach ( $fields as $name => $value )
    {
        $fields_html[] = sprintf(
            '<input type="text" name="%1$s[%2$s]" value="%3$s" class="widefat feature%2$s">',
            $this->get_field_name( 'fields' ),
            $fields_counter,
            esc_attr( $value )
        );
        $fields_counter += 1;
        if ($fields_counter == $field_num) break;
    }


    print 'Fields<br />' . join( '<br />', $fields_html );
    ?>
    <script type="text/javascript">
        var fieldname = <?php echo json_encode($this->get_field_name( 'fields' )) ?>;
        var fieldnum = <?php echo json_encode($fields_counter - 1) ?>;

        jQuery(function($) {
            var count = fieldnum;
            $('.addfeature').click(function() {
                $( ".feature"+count).after("<input type='text' name='"+fieldname+"["+(count+1) +"]' value='' class='widefat feature"+ (count+1) +"'>" );
                count++;

            });
        });
    </script>
    <?php
    echo '<input class="button addfeature" type="button" value="' . __( 'Add Feature', 'myvps' ) . '" id="addfeature" />';
}

Answer 1

这是需要 js 管理其设置的小部件的常见问题。我的公司做了很多自定义小部件，我也遇到过同样的问题很多次。问题在于javascript，它与整个页面的交互。如果页面上有两个这些小部件，您会立即遇到问题。仅供参考，如果您将此小部件添加到任何侧边栏，则页面上已经有两个小部件，一个是您刚刚添加到侧边栏的，一个位于小部件“池”中。让我解释一下。

假设您将小部件添加到主侧边栏。您单击保存并重新加载页面。现在您在主侧边栏下有了这个小部件，然后单击添加按钮，它会触发两次。为什么？原因是您的 javascript 附加到页面上的 ALL $('.addfeature')，并且它为页面上此小部件的每个副本运行一次。您在侧边栏中有一份副本，并且您的小部件池中有一份副本，WordPress 使用该副本从中克隆新的小部件。

一般来说，最简单的解决方案是让您的 javascript 以特定的.addfeature 为目标，而不是全部.addfeature。如何？像这样：

// your code
...
print 'Fields<br />' . join( '<br />', $fields_html );
?>
<script type="text/javascript">
    var fieldname = <?php echo json_encode($this->get_field_name( 'fields' )) ?>;
    var fieldnum = <?php echo json_encode($fields_counter - 1) ?>;

    jQuery(function($) {
        var count = fieldnum;
        // change this from simply '.addfeature' to a unique version of the name
        // which wordpress widget page will interpret for you, making it a unique
        // value for each copy of the widget, including the one in the widget pool
        $('.<?php echo $this->get_field_id('addfeature') ?>').click(function() {
            $( ".feature"+count).after("<input type='text' name='"+fieldname+"["+(count+1) +"]' value='' class='widefat feature"+ (count+1) +"'>" );
            count++;

        });
    });
</script>
<?php
// change this from simply 'addfeature' to a unique version of the name
// which wordpress widget page will interpret for you, making it a unique
// value for each copy of the widget, including the one in the widget pool
echo '<input class="button '.$this->get_field_id('addfeature').'" type="button" value="' . __( 'Add Feature', 'myvps' ) . '" id="addfeature" />';

我的公司之前已经克服了很多很多次。 $this->get_field_id 函数在任何扩展 WP_Widget 的类中都可用。它生成一个唯一 ID（和占位符唯一 ID），小部件管理页面使用它来唯一标识多个侧边栏和小部件池中的小部件。这种类型的解决方案将有助于解决小部件管理页面上的几乎所有 javascript 问题。希望这对您和其他有类似问题的人有所帮助。