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

我创建了一个AJAX，可以从数据库中存储和删除数据。数据的添加工作正常，当页面已经刷新时，删除功能也工作正常，但当数据新添加或页面未刷新时，删除功能不工作。

这就是它的工作原理。当添加新数据时，数据将显示，用户可以选择是否删除数据。数据有一个"X"来确定它是一个删除按钮。现在，删除只在页面刷新时起作用。

这是我的保存脚本，正如你所看到的，如果保存成功，它会自动显示数据，以及具有删除功能的span。

$("#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; ?>

                });    

这是我的删除功能，当用户点击"X"跨度时，数据将被删除，但这只有在页面刷新后才会起作用。

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

这是我的HTML，它保存了数据的查询和显示。

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

我想要实现的是使删除函数在数据存储后立即工作。现在它只在页面刷新时起作用。对此有什么想法吗?