未检测到jQuery按钮单击

Question

情况与实现

我正在实现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按钮时，不会显示警报测试 。

Answer 1

在输入上使用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();

Answer 2

由于表单是动态创建的，因此单击“提交”按钮后的检测应如下所示：

jQuery(document).ready(function($) {
    $(document).on("click", '.submitInsert',function(e){        
        $.ajax({
            type: "POST",
            url: ajaxurl,
            data: {
                "action":"insert_new_inventaire"
            },
            success: function() {
                alert( $("#categories").val() );
            }
        });

    });

});