Question

我一直在尝试使用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>

该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']));
        }
    }
}

?>

我已经尝试解决这个问题了几个星期，任何人都可以帮助我。谢谢。

Answer 1

您的“ x按钮” Click事件是动态加载的，因此在“ x按钮”之前先加载。这样就行不通了。

有两种方法可以完成它。

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

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

希望它对您有帮助。

谢谢

Answer 2

这个问题已经在另一个线程中得到了解答-这是因为在设置事件监听器之前必须将元素加载到DOM中-请查看此详细答案，以解决您的问题：

Can't access dynamically generated element 所以...

因此替换：

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

具有：

$(document).on('click', "[id^=notifID]", function(){
     e.preventDefault();
     console.log("TRUE");
});

Answer 3

使用require.js解决此问题，它将使您可以更好地控制页面内js的加载。..这是一个视频教程，其用法..

youtube video

使用onload事件时，jQuery Button功能不起作用

3 个答案: