Кнопка не работает внутри div, но работает снаружи - PullRequest
Новая
       2

Кнопка не работает внутри div, но работает снаружи

0 голосов
/ 29 января 2019

Привет, ребята, и заранее спасибо за вашу помощь.

Я совершенно неопытен с 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.Как только я помещаю его в контейнер, я теряю все функции.

Отредактировано: опечатки: $

1 Ответ

0 голосов
/ 29 января 2019

Я думаю, что основная проблема в том, что вы используете старый синтаксис 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...