Javascript Ajax从数据库中删除数据功能不工作

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

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

这是我的保存脚本，您可以看到，如果保存成功，它会自动显示数据以及具有删除功能的范围

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



                });    

$（“#wordlistsave”）。单击（函数（）
{
var user=$（“#getUser”）.val（）；
var title=$（“#wordbanktitle”）.val（）；
var words=$（“#字库列表”）.val（）；
var postID=$（“#getPostID”）.val（）；
var-ctrtest=2；
var testBoxDiv=$（document.createElement（'div'））
.attr（“id”，单词）；
var dataString='user='+user+'&title='+title+'&words='+words+'&id='+postID；
$.ajax（{
类型：“POST”，
url:“”，
数据：dataString，
cache:false，
成功：功能（posted）
{
css（{“边距底部”：“5px”}）；
testBoxDiv.after（）；
testBoxDiv.appendTo（“test#u容器”）；
ctrtest++；
}
});
警报（“失败”）；
});    

这是我的删除功能，当用户单击“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; ?>

                });      

$（“span”）。单击（函数（）
{
var queryword=$（this.attr（'id'）；
var postIDdel=$（“#getPostID”）.val（）；
var dataString='queryword='+queryword+'&postID1='+postIDdel；
$.ajax({
类型：“POST”，
url:“”，
数据：dataString，
cache:false，
成功：函数（html）
{
$（'div[id=“”+queryword+“]”）。删除（）；
}
});
});      

这是我的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       
                                            }

                                        }   
                                    ?>

也许可以试试这个

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

因此，您对“保存”一词没有问题，只是删除？是的，刷新页面时删除没有问题，只有在保存时添加数据时才有问题。这是可行的，但与$（“span”）的区别是什么。单击（函数（）为此？感谢上面的一个，您正在将点击事件绑定到文档。由于您已经通过ajax加载了新内容，DOM不知道它在哪里，这就是为什么它不适合您的原因如果
click
和
on
的区别在这里，您可以得到所有的解释