ajax / jquery 没有通过第二次点击值[重复]答案

【问题标题】：ajax / jquery not passing 2nd click values [duplicate]ajax / jquery 没有通过第二次点击值[重复]
【发布时间】：2017-03-10 17:47:14
【问题描述】：

对 JavaScript、jquery 和 ajax 来说非常陌生，并且在使用一组非常基本的脚本来在按钮单击时从数据库加载更多数据时遇到困难。

我第一次单击加载更多时，它可以工作。但是第二次点击没有传递值并且什么都不做。

这是加载一次数据并包含 jquery、ajax 内容的主脚本。

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#btn1, #btn2").click(function() {
          pagenum = $(this).val();
          val = "Loading page " + pagenum + "...";
          $(this).text(val);

          $.ajax({
            type: "POST",
            url: "loadmore.php",
            data: {page: pagenum},
            success: function(response){
              if(response){
                $("#btn1").hide();
                $("#div1").append(response);
              }
            }
          });
        });
      });
    </script>
  </head>

  <?php
    // main.php contains db connection
    include('main.php');

    $rowsperpage = 2;

    $q = "SELECT col1, col2 from mytableORDER BY col1 LIMIT $rowsperpage OFFSET 0";
    $r = pg_exec($dbconnect, $q);

    echo "<div id='div1' style='margin:10px;'>";

    while ($row = pg_fetch_row($r) ) {
      echo "<div>$row[1]</div>";
    }

    echo "<button id='btn1' value=2>Load More</button>";

    echo "</div>";
  ?>

这是获取更多数据以显示的脚本。

<?php
  include('../config.php');
  include('functions.php');
  $rowsperpage = 2;

  if(isset($_POST['page'])) {
    $paged=$_POST['page'];
  } else {
    $paged = 1;
  }

  if($paged > 1) {
    $rowoffset = $rowsperpage * ($paged -1);
    $limit = " LIMIT $rowsperpage OFFSET $rowoffset";
  } else {
    $limit = " LIMIT $rowsperpage OFFSET 0 ";
  }

  $q = "select subindustryid, subindustry from sub_industries ORDER BY subindustry $limit";
  $r = pg_exec($dbconnect, $q);

  while ($row = pg_fetch_row($r) ) {
    echo "<div>$row[1]</div>";
  }

  $nextpage = $paged + 1;

  echo "<button id='btn1' value=$nextpage>Load even more </button>";
?>

问题是显示第二个按钮，点击它时没有任何反应。

感谢您的宝贵时间！

【问题讨论】：

代码中没有带有id="btn2" 的按钮，我猜这可能是一个问题。或者如果你想点击id="btn1"并且它是动态添加的，你需要用这个$(document).on("click", "#btn1, #btn2", function() {替换这个$("#btn1, #btn2").click(function() {，因为它是在生成DOM之后添加的
$("#btn1, #btn2").click(function() { 将其更改为 $(document).on('click',"#btn1, #btn2",function() { 并检查 id = "btn2" 是否丢失
如果有问题，请检查您的控制台日志。
jQuery 仅在页面运行时才知道页面中的元素，因此添加到 DOM 的新元素无法被 jQuery 识别。为了解决这个问题，请使用event delegation，将新添加的项目中的事件冒泡到 DOM 中的某个点，当 jQuery 在页面加载时运行时该点就在那里。很多人使用document 作为捕捉冒泡事件的地方，但没有必要一直爬到 DOM 树上。理想情况下you should delegate to the nearest parent existing at the time of page load.
ID's Must Be Unique，特别是因为当您尝试与这些元素交互时，它会导致JavaScript 和 CSS 出现问题。

标签： javascript php jquery ajax

【解决方案1】：

问题在于事件绑定。更改此行-

 $("#btn1, #btn2").click(function() {

到这一行

$("#div1").on("click","#btn1, #btn2",function(){

您的 php 还返回一个 ID 为 btn1 而不是 btn2 的按钮

在此处阅读有关 jQuery 事件绑定的信息：https://learn.jquery.com/events/handling-events/ 和 http://learn.jquery.com/events/event-delegation/

【讨论】：

是的，我在帖子中的错字。两个按钮都标记为 btn1 而不是 2。我粘贴了旧代码。
感谢您的回复。这解决了问题。有人可以向我解释事件绑定，以便我理解为什么它被修复了吗？谢谢！
@user1970839 在我的回答和 jay blanchard 评论中解释
@user1970839 您需要停止生成多个相同的 ID，正如我在回答中已经提到的那样
@user1970839 我添加了 2 个链接来解释 jQuery 中的事件绑定

【解决方案2】：

实际上id 标识符应该是唯一的——这是一般约定。您可以使用id="#btn1" 加载更多按钮，并通过隐藏和附加隐藏旧按钮从响应文本表单 ajax 中出现新按钮 - 但您可以在不发送响应文本中的按钮的情况下进行管理-

在您的 html 页面上进行以下更改

值应该被引用<button id="btn1" value="2">Load More ... </button>
利用 jQuery 中的专用函数调用，例如-$(document).on('event','dom_identifiers',callbackfunction(){})
在 ajax 中不需要隐藏当前点击的按钮，而不是隐藏按钮，只需使用 jQuery 的 before() 函数在加载更多按钮之前添加新的记录

对于下一页，您可以增加当前按钮的值

$(document).ready(function(){
    // dedicated function calling 
    $(document).on('click','#btn1',function() {
      pagenum = $(this).val();
      val = "Loading page " + pagenum + "...";
      $(this).text(val);
      $.ajax({
        type: "POST",
        url: "loadmore.php",
        data: {page: pagenum},
        success: function(response){
          if(response){
            // increase the value load more
            $("#btn1").val(parseInt($("#btn1").val())+1);
            // add response data just before the loadmore button 
            $("#btn1").before(response);
          }
        }
      });
    });
  });

按钮应该是这样的

echo "<button id='btn1' value="2">Load More</button>";

现在在获取 php 页面时请删除这两行-

$nextpage = $paged + 1;
echo "<button id='btn1' value=$nextpage>Load even more </button>";

【讨论】：

如果这对您有帮助，请告诉我