Question

我在PHP项目中一直在搞乱一些JS和ajax，我遇到了一些问题。只有在单击或刷新单击后刷新页面时，ajax似乎才有效。我正在使用jquery 3.2.1。

我第一次使用 .live（）但现在已弃用，我读到 .on（）是另一种选择，所以我现在正在使用它。

这是我的JS部分：

  $(".up_vote").on("click", function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'upvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $(".down_vote").on("click", function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'downvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $("#btnpost").click(function() {
    var post = $("#post_feed").val();
    if (post == "") {
      alert("This can't be empty.");
      return false;
    } else {
      $.ajax({
        type: "POST",
        data: {
          'post_feed': post,
          'action': 'post'
        },
        url: '<?php echo $url; ?>/includes/functions.php',
        dataType: 'json',
        success: function(response) {
          if (response.ResponseCode == 200) {
            $("#post_feed").val("");
            $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
          } else {
            alert(response.Message);
          }
        }
      });
    }
  });
});

我有什么遗漏或做错了吗？

Answer 1

您好我认为您错过了返回false或 e.preventDefault（）;

返回false; 使浏览器取消发布表单到服务器。

在ajax函数后添加返回false 或 e.preventDefault（）;

示例

$("#btnpost").click(function(e) { ///e here var post = $("#post_feed").val(); if (post == "") { alert("This can't be empty."); return false; } else { $.ajax({ type: "POST", data: { 'post_feed': post, 'action': 'post' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $("#post_feed").val(""); $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div'); } else { alert(response.Message); } } }); } e.preventDefault(); //Here /// or return false; /// Here });

Answer 2

首先确保你正在击中目标，试试这个并查看警报是否显示：

$(function() {
    $(document).on('click', '.up_vote', function() {
       alert('ok');
    });
});

点击事件附加到页面加载时的现有元素。这里的关键词是“现有”。当我们用ajax加载东西时，我们操纵DOM。我们正在放置全新的元素。所以我们需要做的是在放置新内容后附加该事件。

所以每次调用ajax时附加事件我们都会使用 .on

相应地编辑您的代码

  $(document).on('click', '.up_vote', function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'upvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $(document).on('click', '.down_vote', function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'downvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $(document).on('click', '#btnpost', function() {
    var post = $("#post_feed").val();
    if (post == "") {
      alert("This can't be empty.");
      return false;
    } else {
      $.ajax({
        type: "POST",
        data: {
          'post_feed': post,
          'action': 'post'
        },
        url: '<?php echo $url; ?>/includes/functions.php',
        dataType: 'json',
        success: function(response) {
          if (response.ResponseCode == 200) {
            $("#post_feed").val("");
            $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
          } else {
            alert(response.Message);
          }
        }
      });
    }
  });
});

Answer 3

您可以尝试下面给出的代码。

$(document).on("click",".up_vote",function() {
    alert("click");
});

Answer 4

$（文档）.on（＆＃39;点击＆＃39;）事件应在页面加载时调用一次。无需在行添加上添加文档更改。

OR

您可以先取消绑定事件，然后再次绑定

 $(document).off("click", '.up_vote').on("click", '.up_vote', function () {
       alert("done");
       // Code here...
 });

除非刷新页面，否则jQuery Ajax点击不起作用

4 个答案: