Question

对于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>";
?>

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

感谢您的时间！

Answer 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/

Answer 2

实际上var oWebModule: TWebModule; sHeader: String; begin oWebModule := GetDataSnapWebModule; sHeader := oWebModule.Request.Content; end;标识符应该是唯一的 - 这是一般约定。你已经加载了更多按钮id，并通过隐藏和附加隐藏旧按钮从响应文本形式ajax中显示新按钮 - 但是你可以在响应文本中通过发送按钮来管理 -

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

值应引用id="#btn1"
在jQuery中使用专用函数调用，如<button id="btn1" value="2">Load More ... </button>
在ajax中不需要隐藏点击的当前按钮，而不是隐藏按钮只需添加在加载更多按钮之前获取的新记录，使用jQuery的$(document).on('event','dom_identifiers',callbackfunction(){})函数
对于下一页，您可以增加当前按钮的值
```
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);
          }
        }
      });
    });
  });

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

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

ajax / jquery没有传递第二个点击值

2 个答案: