Question

我有这个小脚本，当点击它时，将显示我进行PHP查询的页面中的内容。我的问题是，如果用户单击乘法次数，它只会加载PHP页面中的内容倍增时间......

这是我的jQuery代码：

$('.notifications-load').on('click',function() {
        $('#notifications-holder').load("/?i=notifications");

    });

我的HTML：

<i class="fa fa-bell notifications-load"><span class="notification">5</span></i>
<div id="notifications-holder"></div>

这是PHP页面（？i =通知）：

$n=$dbh->prepare("SELECT * FROM users_notifications WHERE userid=0 OR userid=:userid");
$n->bindParam(":userid",$userdata['id']);
$n->execute();

$data=$n->fetchAll();
foreach ($data as $value) {
 echo $value['text'];
}

如果用户在.notifications-load点击了3次示例，那么/?i=notifications中的内容将加载#notifications-holder 3次 - 我该如何防止这种情况？

Answer 1

信不信由你，一个不同的角色会解决它：

$('.notifications-load').one('click',function() {
// Here -------------------^
    $('#notifications-holder').load("/?i=notifications");

});

jQuery的one函数挂钩了一个处理程序，它在第一次被调用时自动取消挂钩。

如果您厌恶使用one（正如某些人所做的那样很容易将其误读为on），您有几个选择：

您可以为其创建别名：
```
$.fn.onOnce = $.fn.one;
```

您可以明确地解开处理程序：

$('.notifications-load').on('click.load',function() {
    $('#notifications-holder').load("/?i=notifications");
    $('.notifications-load').off('click.load');
});

Answer 2

除了使用$.one之外，您还可以查看$('#notifications-holder')是否已有值。类似的东西：

$('.notifications-load').on('click',function() {
       var notification = $('#notifications-holder');
       if (!notification.html().trim().length) {
          notification.load("/?i=notifications");
       }
    });

jQuery - 从另一个页面加载内容 - 只有一次

2 个答案: