Question

我写了这段代码：

<script type="text/javascript">
$('#updateAssignment').on('click', function(event){
  event.preventDefault();
  var currentdate = new Date();
  var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
  $('#updateAssignment').text(datetime);
});
</script>

使用这个html：

<p class="card-text" id="updateAssignment">Last update: <?php echo date('d-m-Y H:i:s')?> <a href="?update=true"><i class="fa fa-refresh"></i></a></p>

我想要的是以下内容：

我希望在点击刷新按钮而不刷新整个页面时更新日期。不知怎的，它不适用于此代码，我在控制台中没有任何错误。

有人可以帮帮我吗？

Answer 1

替换

href="?update=true"

使用

href="#"

上一行会让您的浏览器发起您不想要的GET请求。

Answer 2

您可以通过多种方式满足您的需求，下面为您的代码添加了一种方式。

您添加了event.preventDefault();，因此阻止了点击事件。

或者您可以按照BeetleJuice建议删除href链接。

<强> HTML

<p class="card-text" id="updateAssignment">
    <span>Last update: <?php echo date('d-m-Y H:i:s')?></span>
    <a href="?update=true"><i class="fa fa-refresh"></i>Sync Date</a>
    </p>

<强>脚本

$('#updateAssignment a').on('click', function(event){
            event.preventDefault();
            var currentdate = new Date();
            var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
            $('#updateAssignment span').text(datetime);
        });

DEMO

Answer 3

这有效：

＆＃13;

$('#updateAssignment').click(function(){
  var currentdate = new Date();
  var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
  $('#updateAssignment').text(datetime);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="card-text" id="updateAssignment">Last update: PHP_HERE <a href="?update=true"><i class="fa fa-refresh"></i></a></p>

＆＃13;

Answer 4

替换

href="?update=true"

到

href="#null"

和

$(function() {
    $('#updateAssignment').on('click', function(event){
      event.preventDefault();
      var currentdate = new Date();
      var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
      $('#updateAssignment').text(datetime);
    });
});

以$(function() {

换行

单击更新日期而不刷新页面

4 个答案: