jQuery Ajax点击无效，除非刷新页面

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);
          }
        }
      });
    }
  });
});

我有什么遗漏或做错的地方吗？

- Martin

---

你好！你在Ajax的success回调中使用了.load？然后你惊讶地发现出现了一些奇怪的行为？而且你甚至没有使用Ajax响应...这看起来很奇怪。 - Louys Patrice Bessette

你没有正确使用 on，如果你的 ajax 请求还替换了你点击的元素，你需要使用 委托 版本。 - adeneo

在使用 JavaScript 时，如果需要嵌入 PHP 代码，请使用双引号。 - Niklesh Raut

Answer 1

你好，我认为你缺少了 return false 或者 e.preventDefault();

return false; 可以让浏览器取消表单提交到服务器。

在 ajax 函数之后添加 return 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

  });

- HoangHieu

Answer 2

首先确保你正在命中目标，尝试以下操作，看看是否会弹出警报：

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

在页面加载时，单击事件会附加到现有元素上。关键词在于“existing”。当我们使用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);
          }
        }
      });
    }
  });
});

- Sylvester

Answer 3

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

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

- Gondaliya Darshan

Answer 4

$(document).on('click') 事件应该在页面加载时只调用一次。无需在添加行时添加文档更改。

或者

您可以先解除绑定事件，然后再重新绑定，例如：

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

- Sanyami Vaidya