Javascript 使用onload事件时Jquery按钮功能不起作用

我一直在尝试使用Jquery/Javascript中的onload事件动态加载PHP文件。以下是到目前为止我编写的代码

    <script>
    $(document).ready(function() {
        setInterval(function () {
                $('#alerts').load('alert-check.php', function () {
                    $('#notifID').click(function (e) {
                        e.preventDefault();
                        console.log("TRUE");
                    });
                });
            }, 1000);

    });
</script>

$（文档）.ready（函数（）{
setInterval（函数（）{
$（'#alerts'）.load（'alert-check.php'，function（）{
$（'#notifID'）。单击（函数（e）{
e、 预防默认值（）；
console.log（“真”）；
});
});
}, 1000);
});

php文件每1秒正确加载一次，但问题是每当我单击x按钮时，它都不工作。在alert-check.php中，我有以下代码

    <?php

include '../controller/action.php';
if(isset($_POST['dismiss'])){
    $id = $_POST['id'];
    $update = db_update('tbl_notif', $data = array("type"=>"Dismissed"), $where = array("id"=>$id));
}


$timenow = date('h:i:s');
$value = custom_query("SELECT * FROM tbl_notif WHERE type='Sticky' ORDER BY id DESC");
if($value->rowCount()>0)
{
    while($r=$value->fetch(PDO::FETCH_ASSOC)) {

        $r['content'];
        ?>
        <form id="alertForm" method="POST" action="">
            <div class="alert alert-info alert-dismissible" role="alert">
                <button type="submit" class="close" data-dismiss="alert" aria-label="Close" name="dismiss"><span aria-hidden="true">&times;</span></button>
                <input type="text" value="<?= $r['id']; ?>" id="notifID" name="id">
                <i class="fa fa-info-circle"></i> <p><?= $r['title']; ?></p>
                <p><?= $r['content']; ?></p>
            </div>
        </form>

        <?php
        if($r['intervals'] == '5m'){
            $t = date('h:i:s');
            $intervalResult = date('h:i:s', strtotime('+5 minutes', strtotime($t)));
            $update = db_update('tbl_notif', $data = array("notif_interval"=>$intervalResult, "type"=>"Sticky"), $where = array("id"=>$r['id']));
        }
    }
}

?>

---

这个问题已经在另一个线程中得到了回答-因为在设置事件侦听器之前必须将其元素加载到DOM中-查看此详细答案，适用于您的问题：


所以

因此，请替换：

 $('#notifID').click(function (e) {
     e.preventDefault();
     console.log("TRUE");
 });

与：

“x按钮”在“x按钮”之前首先单击加载的事件，因为它是动态加载的。那样做是行不通的

有两种方法可以实现这一目标

将“x按钮”单击事件移动到动态加载的文件
您可以通过以下方式修改单击事件代码：

希望对你有帮助

感谢使用require.js来解决此问题，它将让您更好地控制页面中的js加载。。这是一个如何使用它的视频教程

按钮单击是客户端，而PHP是服务器端，但您可以通过使用ajax实现这一点。知道我如何做到吗？脚本启动时，notifID不存在。试试$（'#notifID'）。在（'click'，函数（e）{…@ChooHwan您能详细说明一下吗？谢谢you@AmmarAli-我认为我还没有达到这样做所需的声誉-似乎没有这样的选择。很抱歉，我不太了解它，因为我是javascript新手。编辑并添加了答案-希望这有帮助。setInterval（函数（）{$（'#alerts'）.load（'alert-check.php'，function（）{$（document）.on（'click'，“[id^=notifID]”，function（）{e.preventDefault（）；console.log（“TRUE”）；}}，1000）；我尝试了这个，但仍然不走运：（它向我显示了这个错误TypeError:$（…）。Tiense不是一个函数Use“jQuery.delegate”不是“jQuery.Tiense”。我犯了一个输入错误。很抱歉。到目前为止，这是我编写的代码，每当我单击notifID按钮setInterval（函数（）{$（'#alerts'）.load（'alert-check.php'，function（）{$（“#alerts”）.delegate（“alerts”，“click”，function（）{$（'#notifID'）。click（function（e）{e.preventDefault（）；console.log（“true”）；})}，1000）；您以错误的方式使用了委托函数。当您放入$（“#alerts”）.delegate时，这意味着这将检查#alerts下的#alerts按钮，这是不可能的。如果您没有id为“alerts”的多个元素，请使用以下jQuery（“body”），而不是jQuery（“alerts”）.代表
$(document).on('click', "[id^=notifID]", function(){
     e.preventDefault();
     console.log("TRUE");
});

jQuery("#x_button_parent_element_id").delegate("alerts","click",function(){
                  $('#notifID').click(function (e) {
                        e.preventDefault();
                        console.log("TRUE");
                    });
});