Ajax delete data from database function not working

Question

I have created an AJAX that can store and delete data from database. The adding of data is working fine also the delete function is working fine when the page is already refresh but the delete is not working when data is newly added or when the page is not refresh.

This how it works. When a new data is added, the data will display, the user has an option to delete the data or not. The data has a "X" to determine that it is a delete button. Right now, The delete only works when the page is refresh.

This my SAVING script, as you can see if saving is success it displays the data automatically, together with the span that has the delete function.

$("#wordlistsave").click(function()
                {

                    var user = $("#getUser").val();
                    var title = $("#wordbanktitle").val();
                    var words = $("#wordbanklist").val();
                    var postID = $("#getPostID").val();

                    var ctrtest = 2;
                    var testBoxDiv = $(document.createElement('div'))
                                        .attr("id", words);
                    var dataString = 'user='+user+'&title='+title+'&words='+words+'&id='+postID;

                        <?php if (is_user_logged_in()): ?>

                                $.ajax({ 
                                    type: "POST",
                                    url: "<?=plugins_url('wordlistsave.php', __FILE__ )?>",
                                    data: dataString,
                                    cache: false,
                                    success: function(postID)
                                    {

                                        testBoxDiv.css({"margin-bottom":"5px"});
                                        testBoxDiv.after().html('<span id="'+words+'" style="cursor:pointer">x '+postID+'</span>&nbsp&nbsp<input type="checkbox" name="words[]" value="'+ words+ '">'+words );
                                        testBoxDiv.appendTo("#test_container"); 

                                        ctrtest++;

                                    }
                                });



                        <?php else: ?>
                                alert('Fail.');
                        <?php endif; ?>



                });

This is my delete function , when the user click the "X" span, the data will be deleted, but this only works after the page is refresh.

$("span").click(function()
                {
                    var queryword=$(this).attr('id');
                    var postIDdel = $("#getPostID").val();
                    var dataString = 'queryword='+queryword+'&postID1='+postIDdel;

                    <?php if (is_user_logged_in()): ?>

                            $.ajax({
                                type: "POST",
                                url: "<?=plugins_url('worddelete.php', __FILE__ )?>",
                                data: dataString,
                                cache: false,
                                success: function(html)
                                {
                                    $('div[id="'+queryword+'"]').remove();

                                }


                            });

                    <?php else: ?>

                    <?php endif; ?>

                });

This is my HTML, the one that holds the querying of data and displaying of data.

<?php 

                                        global $wpdb;

                                        $query_wordbanklist = $wpdb->get_results("SELECT meta_value, meta_id FROM wp_postmeta WHERE post_id = '$query_id' AND meta_key = '_wordbanklist'");


                                        if($query_wordbanklist != null)

                                        {
                                            echo "<h3> Wordlist </h3>";
                                            foreach($query_wordbanklist as $gw)
                                            {

                                    ?>          <div id="<?php echo $gw->meta_value ?>">
                                                <span id="<?php echo $gw->meta_value ?>" style="cursor:pointer">x</span> &nbsp&nbsp<input type="checkbox" name="words[]"  value="<?php echo $gw->meta_value ?>"><?php echo $gw->meta_value; ?>
                                                </div>
                                        <?php       
                                            }

                                        }   
                                    ?>

All I wanted to achieve is to make the delete function works right after the data is stored. Right now it only works when the page is refresh. Any idea on this?

So you have no probs with the word save, its just the delete? — Becs Carter
– Becs Carter, Commented May 19, 2014 at 1:44
yes, the delete has no problem when the page is refresh, it only has a problem when the data has been added right saving. — user3627265
– user3627265, Commented May 19, 2014 at 1:49

Becs Carter · Accepted Answer · 2014-05-19 01:46:32Z

1

Perhaps try this...

$(document).on('click', 'span', function() {
     // delete stuff in here
}

answered May 19, 2014 at 1:46

Becs Carter

1,2501 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3627265 Over a year ago

This works, but what is the diff with $("span").click(function() to that? thanks

Becs Carter Over a year ago

With the above one, you are binding the click event to the document. As you have loaded the new content via ajax, the DOM doesnt know its there which is why it doesnt work for you

HTTP Over a year ago

All the explanation that you can get if what is the difference of click and on is in this stackoverflow.com/questions/8018760/…

Collectives™ on Stack Overflow

Ajax delete data from database function not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related