jQuery 代码仅适用于浏览器的编辑器，但不适用于脚本标签

Question

我发现很难找出为什么我的 Jquery 代码在插入 <script></script> 标记时不起作用，但在我的浏览器编辑器中执行时却起作用。下面的代码没有错误，仅当 Jquery 脚本在我的浏览器的编辑器中执行但在脚本标记中使用时没有。

<!DOCTYPE html>
<head>
    <title>Delete data</title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div><font color="#000"><b>Aaron</b></font></b>
    <div>Hello World!</div>
    <div class="d-flex justify-content-start comment_buts" style="font-weight: bold; font-size: 13px;">
        <span class="mr-3"><a href="#"><font color="red">Like</font></a></span>
        <span class="mr-3 comment_reply" id="mention_aaron">Reply</span>
        <span class="mr-3 comment_del_but" id="del_15841889572020Aaroncmidb1">Delete</span>
    </div>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
        var post_id = "b71ShOv5imgidb1"; // $_GET['post_id'];
    </script>
    <script src="delete.js"></script>
</body>
</html>

delete.js

$(document).ready(function(){
    $('.comment_del_but').click(function(){
        var el = this;
        var id = this.id;
        var splitid = id.split("_");

        // id
        var deleteid = splitid[1];

        $.ajax({
            url: 'delete.php?p_id='+post_id,
            type: 'POST',
            data: { id:deleteid },
            success: function(response) {
                if(response == 1) {
                    $(el).closest('.comment_to_del').fadeOut(500, function(){
                        $(this).remove();
                    });
                } else {
                    alert('Ops! Something went wrong, please try again');
                }
            }
        });
    });
});

delete.php

<?php 
    // connect to db
    include 'db.php';

    if (isset($_GET['p_id']) && isset($_POST['id'])) {
        $post_id = $_GET['p_id']; // post id
        $comment_id = $_POST['id']; // comment id

        // select comment
        $select_comment = "SELECT comment FROM users_post_comments WHERE comment_id = ? AND for_post_id = ?";
        if($stmt = mysqli_prepare($db, $select_comment)) {
            mysqli_stmt_bind_param($stmt, "ss", $comment_id, $post_id);
            mysqli_stmt_execute($stmt);
            while (mysqli_stmt_fetch($stmt)) {
                // fetch results
            }

            // if comment exist
            if (mysqli_stmt_num_rows($stmt) > 0) {
                $delete_comment = "DELETE FROM users_post_comments WHERE comment_id = ? AND for_post_id = ?";
                $stmt = mysqli_prepare($db, $delete_comment);
                mysqli_stmt_bind_param($stmt, "ss", $comment_id, $post_id);
                mysqli_stmt_execute($stmt);
                echo 1;
                // echo "deleted successful";
            } else {
                echo 0;
            }
        }
        // close statement
        mysqli_stmt_close($stmt);
    }
    // close db connection
    mysqli_close($db);
?>

Answer 1

好的！我刚刚更换了

$(document).ready(function(){
    $('.comment_del_but').click(function(){

和

$(function(){
    $(document).on('click','.comment_del_but',function(){

我的代码现在可以正常工作了。我认为这可能是因为 JQuery 正在使用的版本。无论如何，感谢您的支持。

jQuery 代码仅适用于浏览器的编辑器，但不适用于脚本标签

jQuery code only works in browser's editor but not when in script tag

javascript

jquery

console.log