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

Question

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

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

这是我的 SAVING 脚本，你可以看到如果保存成功，它会自动显示数据，以及具有删除功能的 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       
                                            }

                                        }   
                                    ?>

我想要实现的只是让删除功能在数据存储后立即工作。现在它只在页面刷新时有效。对此有什么想法吗？

Answer 1

也许试试这个...

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