Ajax从数据库功能中删除数据不起作用

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?

Answer 1

Perhaps try this...

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