jQuery button click not detected

Question

Situation and realisations

I'm implementing a WP plugin and have to insert a new post in the wp database. So I created a form that display when the button buttonCreateInv is clicked. I use jQuery and it does work.

<?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
}

It does display my form in the function 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;
}

Problem

The second time I use it, with exactly the same manner, it is not working.. My second jQuery which is activated on the click on the submit button submitInsert seem to not being called.

<?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 
}

The alert test is not displayed when I click on the submitInsert button.

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mark Baijens, Feb 19 '19 at 16:54

score 1 · Answer 1 · answered Feb 19 '19 at 16:58

1

When using type SUBMIT on input you are actually submitting the form unless you stop it.

you can fix this by changing this

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

to this

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

or add a line to the jQuery and add e to the function arguments

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

answered Feb 19 '19 at 16:58

imvain2

15,480
1
16
21

it helped but I still can't see the effect of my jQuery, the alert `alert('test');` is not displayed when click on the button `submitInsert` – ninagath Feb 20 '19 at 08:17

score 1 · Accepted Answer · answered Feb 20 '19 at 13:53

As the form has been dynamically created, the detection on the click of the submit button should look like this:

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() );
            }
        });

    });

});

jQuery button click not detected

Situation and realisations

Problem

2 Answers2