时间戳

首页 > 解决方案 > 未检测到 jQuery 按钮单击

jquery - 未检测到 jQuery 按钮单击

问题描述

情况和认识

我正在实现一个 WP 插件，并且必须在 wp 数据库中插入一个新帖子。所以我创建了一个在单击按钮时显示的表单buttonCreateInv。我使用 jQuery，它确实有效。

<?php

add_action('admin_head', 'JS_create_form_inventaire');
add_action('wp_ajax_display_form_inventaire', 'display_form_inventaire');

function button_create_inventaire(){
    echo '<button type="button" class="buttonCreateInv">Créer un inventaire</button>';
    echo '<div class="formCreateInv"></div>';
}

function JS_create_form_inventaire(){
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    $('.buttonCreateInv').click(function(){
        $.get( 
                ajaxurl, 
                { 'action': 'display_form_inventaire' }, 
                function (result) { 
                    $(".formCreateInv").html(result); 
                }
        );    
    });
});
</script>
<?php
}

它确实在函数中显示了我的表单display_form_inventaire：

function display_form_inventaire() { 
   ...
   $html .='<p><label for="description">Content</label></p>'.
       '<textarea id="textareaContent" name="textareaContent" style="display:none"></textarea>'.
       '<div style="background-color:white" id="divContent" name="divContent" contenteditable="true">'.
        '<table>...</table></div>';

    $html .='<p><input type="submit" value="Créer" tabindex="6" class="submitInsert" name="submitInsert" /></p>'.
            '<input type="hidden" name="creation_inventaire" value="new_post" />'.
            wp_nonce_field( 'new-post' ).
            '</form>'.
            '</div>';

   echo $html;
}

问题

我第二次使用它时，以完全相同的方式，它不起作用..我的第二个 jQuery 在单击提交按钮时被激活submitInsert似乎没有被调用。

<?php

add_action('admin_head', 'JS_get_inv_content');
add_action('wp_ajax_insert_new_inventaire', 'insert_new_inventaire');

function JS_get_inv_content(){
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    $('.submitInsert').click(function(){
        alert('test');
        $.get( 
                ajaxurl, 
                { 'action': 'insert_new_inventaire' }, 
                function (result) { 
                    alert('result');
                    //$.getElementById("textareaContent").value = $.getElementById("divContent").innerHTML;
                }
        );    
    });

});
</script>
<?php 
}

单击按钮时不显示警报测试submitInsert。

标签： jquerywordpress

解决方案

在输入上使用 SUBMIT 类型时，您实际上是在提交表单，除非您停止它。

你可以通过改变这个来解决这个问题

<input type="submit" value="Créer" tabindex="6" class="submitInsert" name="submitInsert" />

对此

<input type="button" value="Créer" tabindex="6" class="submitInsert" name="submitInsert" />

或向 jQuery 添加一行并将 e 添加到函数参数

$('.submitInsert').click(function(e){
         e.preventDefault();

推荐阅读