Question

大家好，在此先感谢您的帮助。

我对Ajax缺乏经验，并且对自己尝试做的事情有疑问。它是使用的基本通知容器 <div>和其他一些元素。

问题是，我似乎无法在div中使用任何按钮。我最近的尝试是使用ajax在底部使用一个“标记所有已读”按钮，调用一个php文件（当前仅具有用于测试的回显）。

关于我所缺少的任何想法吗？

这是按钮行，它位于另一个容纳通知的容器内。

<div id="markallread" class="markAll">
    <input type="button" id="markallr" value="Mark All as Read" class="button">
</div>

还有我所拥有的ajax：

$(document).ready(function () {
    $("#markallr").click(function () {
        $.ajax({
            url : '../markread.php',
            type : 'POST',
            success : function () {  
                alert ("YES");
            },
            error : function () {
                alert ("NO");
            }
        });
    });
});

PHP文件，就像我所说的只是测试的回声。

<?php echo "Success"; ?>

现在，我可以将按钮放置在页面顶部，位于容器外部，它会给我警报“是”，但不会运行php文件。当我将其放置在容器中的任何位置时，都会失去所有功能。

编辑：错别字：$

Answer 1

我认为主要问题是您正在使用旧版本的ajax语法和新的jquery版本尝试以下

      $.ajax({
            url  : '../markread.php',
            type : 'POST',
            cache: false,
            data : 'yourdata=data',
        })
        .done(function (html) {
           console.log('Ajax Completed');
        })
        .fail(function (msg) {
            console.log("Ajax Failed" + msg);
        })
        .always(function () {
            console.log("The always method is always executed!");
        });

更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="markallread" class="markAll"><input type="button" id="markallr" value="Mark All as Read" class="button"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $("#markallr").click(function(){
                $.ajax({
                    url  : '../markread.php',
                    type : 'POST',
                    cache: false,
                    data : 'yourdata=data',
                })
                .done(function (html) {
                   console.log('Ajax Completed');
                })
                .fail(function (msg) {
                    console.log("Ajax Failed" + msg);
                })
                .always(function () {
                    console.log("The always method is always executed!");
                });
            });
        });
    </script>
</body>
</html>

Button在div内不起作用，但在div内起作用

1 个答案:

更新