WordPressでボタンクリックイベントが２回実行されてしまう

jQuery,WordPressカスタマイズともに初心者です。
恐れ入りますが以下質問させてください。

WordPressで自作Widgetを作成しており、ボタンをクリックするとテキストフィールドを増やすということをしたいのですが、WordPressで実行した場合のみボタンクリックイベントが２回起動されているようで、質問させてください。

このページの通りにHTMLにすると１回しか呼ばれず正しく動作します

ボタンクリック時、32行目のログが２回出て、テキストフィールドが４つ作成されてしまいます。

こちらのページを見て冒頭のfrm_cnt宣言後に以下の１行を入れると、ログは１回しか出なくなるのですがテキストフィールドは２つ作成されてしまいます・・・。
$(document).off( 'click', 'span.add');

offにする参考ページ

大変恐れ入りますが、WordPressだと2回呼ばれる原因と、offにしてもテキストフィールドが２つ作成されてしまう原因についてお知恵を貸していただけないでしょうか・・・。よろしくお願いいたします。

以下ソースです。

imagesliderwidget.php

  <script type="text/javascript">
  (function ($) {
    // フォームカウント
    var frm_cnt = 0;

    // clone object
    $(document).on(
        'click', 'span.add', function () {
		console.log("click span.add.on 32行目");
            var original = $('#form_block\[' + frm_cnt + '\]');
            var originCnt = frm_cnt;

            frm_cnt++;

            original
            .clone()
            .hide()
            .insertAfter(original)
            .attr('id', 'form_block[' + frm_cnt + ']') // クローンのid属性を変更。
            .find("input[type='radio'][checked]").prop('checked', true)
            .end() // 一度適用する
            .find('input, textarea').each(
                function (idx, obj) {
                    $(obj).attr(
                        {
                        id: $(obj).attr('id').replace(/[[0-9]]+$/, '[' + frm_cnt + ']'),
                        name: $(obj).attr('name').replace(/[[0-9]]+$/, '[' + frm_cnt + ']')
                        }
                    );
                    $(obj).val('');
                }
            );

            // clone取得
            var clone = $('#form_block\[' + frm_cnt + '\]');
            clone.children('span.close').show();
            clone.slideDown('slow');
        }
    );

    // close object
    $(document).on(
        'click', 'span.close', function () {
            var removeObj = $(this).parent();
            removeObj.fadeOut(
                'fast', function () {
                    removeObj.remove();
                    // 番号振り直し
                    frm_cnt = 0;
                    $(".form-block[id^='form_block']").each(
                        function (index, formObj) {
                            if ($(formObj).attr('id') != 'form_block[0]') {
                                frm_cnt++;
                                $(formObj)
                                .attr('id', 'form_block[' + frm_cnt + ']') // id属性を変更。
                                .find('input, textarea').each(
                                    function (idx, obj) {
                                        $(obj).attr(
                                            {
                                            id: $(obj).attr('id').replace(/[[0-9]]+$/, '[' + frm_cnt + ']'),
                                            name: $(obj).attr('name').replace(/[[0-9]]+$/, '[' + frm_cnt + ']')
                                            }
                                        );
                                    }
                                );
                            }
                        }
                    );
                }
            );
      

});
  })(jQuery);
  </script>


  <p>
          <label for="<?php echo $this->get_field_id('imageurl'); ?>">画像URL:</label>
          <input type="text" class="widefat" id="<?php echo $this->get_field_id('imageurl'); ?>" name="<?php echo $this->get_field_name('imageurl'); ?>" value="<?php echo esc_attr(@$instance['imageurl']); ?>">
          </p>
    
          <p><label for="<?php echo $this->get_field_id('targeturl'); ?>">リンク先:</label>
          <input type="text" class="widefat" id="<?php echo $this->get_field_id('targeturl'); ?>" name="<?php echo $this->get_field_name('targeturl'); ?>" value="<?php echo esc_attr(@$instance['targeturl']); ?>">
          </p>


<form method="post" action="confirm">
    <div class="form-block" id="form_block[0]">
        <!-- Closeボタン -->
        <span class="close" title="Close" style="display: none;">-</span>
        <p>Name:<input type="text" name="name[0]" id="name[0]" /></p>
    </div>

    <!-- Addボタン -->
    <div class="form-block">
        <span class="add" title="Add">+</span>
    </div>
</form> 

       <style>
    .form-block {
  position: relative;
  font-size: 12px;
  padding: 10px;
  margin: 0 0 20px 0;
  background: #fff;
  border: 1px #ccc solid;
  box-shadow: 0 2px 3px 0 #ddd;
  -moz-box-shadow: 0 2px 3px 0 #ddd;
  -webkit-box-shadow: 0 2px 3px 0 #ddd;
}

.form-block .close {
    background-color: #aaa;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #ddc inset;
    color: #666;
    display: inline-block;
    font-size: 24px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
    top: 4px;
    position: absolute;
    right: 4px;
    width: 25px;
    cursor: pointer;
}

.form-block .add {
    position: absolute;
    background-color: #ddd;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 32px;
    height: 20px;
    width: 20px;
    line-height: 15px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}</style>

以下はfunctions.phpです。

php
1//ウィジェットを登録する
2
3class Images_Slider extends WP_Widget
4{
5    function Images_Slider()
6    {
7        $widget_option = array('description' => '複数のアイキャッチ画像とリンクを設定');
8        parent::__construct(false, $name = '画像スライダー', $widget_option);
9    }
10	
11
12    
13    // 設定フォームを出力するメソッド
14    function form($instance)
15    {
16		include "imagesliderwidget.php";
17	}
18    
19        //カスタマイズ欄の入力内容が変更された場合の処理
20    function update($new_instance, $old_instance)
21    {
22        $instance = $old_instance;
23        $instance['imageurl'] = strip_tags($new_instance['imageurl']);
24        $instance['targeturl'] = strip_tags($new_instance['targeturl']);
25        return $instance;
26    }
27	
28	// 設定を表示するメソッド
29    function widget($args, $instance)
30    {
31        extract($args);
32        echo $before_widget;
33        $imageurl = null;
34        if(!empty($instance['imageurl'])) {
35            $imageurl = apply_filters('widget_title', $instance['imageurl']);
36        }
37        $targeturl = null;
38        if(!empty($instance['targeturl'])) {
39            $targeturl = apply_filters('widget_title', $instance['targeturl']);
40        }
41        ?>
42
43            <div class="mainvisual">
44            <div class="swiper-container">
45            <div class="swiper-wrapper">
46            <!-- 各スライド -->
47            <div class="swiper-slide"><a href= <?php echo $targeturl ?> ><img src= <?php echo $imageurl ?> alt=""></a></div>
48            <div class="swiper-slide"><a href=<?php echo $targeturl ?>><img src= <?php echo $imageurl ?> alt=""></a></div>
49            <div class="swiper-slide"><a href=<?php echo $targeturl ?>><img src= <?php echo $imageurl ?> alt=""></a></div>
50            </div>
51            <div class="swiper-pagination"></div>
52            </div>
53            </div>
54            <?php
55            echo $after_widget;
56    }
57}
58        add_action('widgets_init', create_function('', 'return register_widget( "Images_Slider" );'));
59

行動規範の内容に同意します

回答3件

さらに調べてみると、ウィジェットのページは左右に別れていて、１つのウィジェットが２つ表示されているかと思いますが、どこで２回実行されているようでした。。

右側だけで囲われているクラスを指定したりしてみましたが、どうしてもうまくいかないのでHTML置き換えの方法で進みたいと考えています・・。

投稿2021/06/22 01:12

ringoringogogo

総合スコア15

cloneをコメントアウトしてしまうとfrm_Cntが再付番されず同じ番号になってしまったので、以下のようにしました。
後半でcloneの２番目をremoveするとうまくいきましたがなぜWordPressだとこうなるのか、わかっておらず不安が残ります・・・。

				 jQuery(document).off('click', 'span.add');
                    jQuery(document).on('click', 'span.add', function () {
                        console.log("addがクリックされました");
                        var original = jQuery('#form_block\[' + frm_cnt + '\]');
                       var originCnt = frm_cnt;
                        frm_cnt++;
                        original
						.clone().insertAfter(original)
                            .attr('id', 'form_block[' + frm_cnt + ']') // クローンのid属性を変更。
                           .end()
                            .find('input, textarea').each(function (idx, obj) {
                                jQuery(obj).attr({
                                    id: jQuery(obj).attr('id').replace(/[[0-9]]+$/, '[' + frm_cnt + ']'),
                                    name: jQuery(obj).attr('name').replace(/[[0-9]]+$/, '[' + frm_cnt + ']')
                                });
                                jQuery(obj).val('');
                            });
                        // clone取得
                        var clone = jQuery('#form_block\[' + frm_cnt + '\]');
						console.log("clone length:"+clone.length);
						clone[2].remove();
					
                        clone.children('span.close').show();
                        clone.slideDown('slow');
                    });

投稿2021/06/16 07:26

ringoringogogo

総合スコア15