'Button doesn't work inside div, but works outside

Hi guys and thanks in advance for your help.

I'm quite inexperienced with Ajax and I have been having a problem with something I have been trying to do. Its a basic notifications container using <div> and some other elements.

Problem is, I can't seem to get any buttons to work inside the div. My latest attempt is a 'Mark All Read' button at the bottom, using ajax, calling a php file (currently only has an echo for testing).

Any ideas on what i'm missing?

This is the button line, which sits inside another container for the notifications.

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

And the ajax I have:

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

PHP file, like I have said is just an echo for testing.

<?php echo "Success"; ?>

Now, I can place the button at the top of the page, outside of the container, and it gives me the Alert 'Yes' but doesn't run the php file. Soon as I place it anywhere in the container, I lose all function.

EDITED : Typos :$

phphtmlajax


Solution 1:[1]

I think the main issue is you are using a old version ajax syntax with a new jquery version try the following

      $.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!");
        });

Update

<!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>

Solution 2:[2]

I have had the same problem and the solution was z-index

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ariel Trujillo

Related Questions