レベル2

ショートコードがフロントエンドで機能しない問題

アンケートアプリケーション用にカスタムショートコードを作成しました。ダッシュボードのサブメニューでショートコードを使用すると、すべてが完璧に動作します。

しかし、フロントエンドで同じショートコードを使おうとすると、フォームが表示されている間、ボタンが正しく機能しません（何のアクションもトリガーされません）。

すでに私のコードを共有しましたが、問題がどこにあるのかわかりません。問題の特定をお願いできますか？

クラス Class_frontend {

   public function __construct() {
       add_shortcode('greeting', [$this, 'display_survey'])；
   }

   パブリック関数 display_survey() {
       global $wpdb；
       $current_user_id = get_current_user_id()；
       $table_name = $wpdb->prefix .code_survey'；

       $query = "SELECT * FROM $table_name ORDER BY id DESC LIMIT 1"；
       $results = $wpdb->get_results($query)；

       if (!empty($results)) { { $wpdb>get_results($query)
           ob_start()；
           foreach ($results as $result) { ?
               ?>
             <form id="survey-form" action="">
      <input type="radio" id="answer_1" name="surveypool" value="<?php echo esc_attr($result->question_1); ?>" />
      <label for="answer_1"><?php echo esc_html($result->question_1); ?></label><br />

      <input type="radio" id="answer_2" name="surveypool" value="<?php echo esc_attr($result->question_2); ?>" />
      <label for="answer_2"><?php echo esc_html($result->question_2); ?></label><br />

      <input type="radio" id="answer_3" name="surveypool" value="<?php echo esc_attr($result->question_3); ?>" />
      <label for="answer_3"><?php echo esc_html($result->question_3); ?></label><br />

      <input type="radio" id="answer_4" name="surveypool" value="<?php echo esc_attr($result->question_4); ?>" />
      <label for="answer_4"><?php echo esc_html($result->question_4); ?></label><br />

      <button type="button" id="generate_button" data-survey-id="<?php echo esc_attr($result->id); ?>">投稿</button>
                   

               <input type="hidden" name="trp-form-language" value="ja"/></form>
               <?php
           }
           return ob_get_clean();
       }

       return '<p>調査はありません。</p>'; // データが見つからなかった場合のフォールバックメッセージ。
   }

ジャバスクリプト

jQuery(document).ready(function ($) {.
    jQuery('#generate_button').on('click', function () {
        alert('working'); // デバッグステップ

        const selectedAnswer = jQuery('input[name="surveypool"]:checked').val()；
        const surveyId = jQuery(this).data('survey-id'); // 正しい属性選択

        if (!selectedAnswer) {
            alert('オプションを選択してください。')；
            を返します；
        }

        jQuery.ajax({
            url: ajax_ob.ajax_url、
            type: 'POST'、
            dataType：'json'、
            data：{
                action: 'submit_survey'、
                answer: selectedAnswer、
                survey_id: surveyId、
                user_id: ajax_ob.user_id、
            },
            success: function (response) {
                if (response.success) {
                    alert(response.data)；
                    $('#survey-form').remove(); // オプションで、送信後にフォームを非表示にできます。
                } else {
                    alert(response.data)；
                }
            },
            error: function () {
                alert('エラーが発生しました。 再試行してください。')；
            },
        });
    });
});