JavaScript/jQuery在AJAX中不起作用

Question

我有php页面"Home.php"，显示用户帖子（使用ajax）。这就是我获得帖子的方式：

    <script type="text/javascript">
    function loadmore()
    {
      var val = document.getElementById("result_no").value;
      var userval = document.getElementById("user_id").value;
      $.ajax({
      type: 'post',
      url: 'fetch.php',
      data: {
        getresult:val,
        getuserid:userval
      },
      success: function (response) {
        var content = document.getElementById("result_para");
        content.innerHTML = content.innerHTML+response;
        // We increase the value by 2 because we limit the results by 2
        document.getElementById("result_no").value = Number(val)+10;
      }
      });
    }
    </script>
    <div id="content">
        <div id="result_para">

        </div>
    </div>

在每一篇文章中，都有一个类似按钮（它也使用ajax）。这就是我保存点赞的方式：

            <script type="text/javascript">
                function likethis(likepostid)
                {

                      $.ajax({
                      type: 'post',
                      url: 'fetchlikes.php',
                      data: {
                        getpostid:likepostid
                      },
                      success: function (response) {
                      }
                      });
                  } 
            </script>

在我使用ajax发布帖子之前，一切都很好。但现在，当我按下点赞按钮时，它确实保存了点赞，但javascript/jquery不起作用。当我按下LIKE按钮时，我试图发出警报，但没有起作用。

这是index.js代码（javascript）。它添加+1个赞，当用户按下按钮时：

$('.btn-counter_likecount').on('click', function(event, count) {
  event.preventDefault();
  //alert("hello");
  var $this = $(this),
      count = $this.attr('data-count'),
      active = $this.hasClass('active'),
      multiple = $this.hasClass('multiple-count_likecount');
  $.fn.noop = $.noop;
  $this.attr('data-count', ! active || multiple ? ++count : --count  )[multiple ? 'noop' : 'toggleClass']('active');
});

编辑fetchlikes.hp:

<?php
  mysql_connect('localhost','root','');
  mysql_select_db('blabla');
  $postid=$_POST['getpostid'];
  mysql_query("UPDATE user_post SET likes_count=likes_count+1 WHERE post_id='$postid'");
?>

Answer 1

因为您的帖子是动态加载的，所以在实际加载帖子之前，绑定事件的javascript正在运行，因此当您尝试绑定事件时，按钮不存在。您可以在jQuery中使用委托事件来处理此问题。

您以前的代码

$('.btn-counter_likecount').on('click', function(event, count) {
  ....
});

新代码

$('#result-para').on('click','.btn-counter_likecount',function(event, count) {
  ....
}

这样，当jQuery的ready()函数运行时，事件将实际绑定到已经存在的父元素。这样，当事件被触发时，事件处理程序会检查匹配元素，而不是当事件被绑定。

为了进一步阅读，请查看jQuery的委托事件