Question

我试图在用户点击按钮时追加div。此跨度是一个计数器，可以在将此内容放入此框时更新计数。我试图通过ajax使用以下代码更新计数，但计数不会在间隔更新。任何人都可以弄清楚我哪里出错了吗？

当单击按钮时，此代码将附加新div。

 $(document).ready(function(){
  $(document).on('click','#somebutton',function () {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number').value = value;
  $("#table-container-main").append('<div id="'+value+'" class="table-container-individual" table_No="'+value+'"><div id="table-container-header"><div id="table-container-header-title">Table '+value+'</div>  <div id="table-container-header-count"><span id="table-container-header-count-'+value+'"></span><span>&nbsp;&nbsp;Seats Occupied</span></div></div></div>');

});
});

此代码应该使用.attr来获取表号。但是我得到的tableNo值是未定义的。该值应该发送到php文件并回显计数。如果我不使用附加的.attr，代码工作正常。

$(document).ready(function(){
   setInterval(function(){
  counttable();
},100);
   function counttable(){
   var tableNo = $("#table-container-individual").attr("table_No");
                  $.ajax({
                    type:"post",
                    url:"counttable.php",
                    data:{tableNo:tableNo},
                    success:function(data){
                         $("#table-container-header-count-"+tableNo).html(data);
                    }
                  });
                }
                counttable();
});

请查看我的代码并帮助我解决这个问题。谢谢

Answer 1

单击您的按钮，您将附加一个类table-container-individual的div。

尝试访问您的div时，您的目标是ID而不是类。使用.代替#：

$(".table-container-individual").attr("table_No");

Answer 2

建议您对混合代码进行以下更新。

findViewById

$(function() {
  function counttable(tci) {
    var tableID = $("#" + tci).data("table-no");
    $.ajax({
      type: "post",
      url: "counttable.php",
      data: {
        tableNo: tableID
      },
      success: function(data) {
        $("#table-container-header-count-" + tableNo).html("Seats Occupied: " + data);
      }
    });
  }
  $('#parentDiv').on('click', '.childButton', function(event) {
    var value = $('#table-number').val();
    value = isNaN(value) ? 0 : parseInt(value);
    value++;
    $('#table-number').val(value);
    var $tblContInd = $("<div>", {
        id: "tci-" + value,
        class: "table-container-individual",
        "data-table-no": value
      })
      .appendTo($("#table-container-main"));
    $("<div>", {
        class: "table-container-header"
      })
      .appendTo($tblContInd);
    $("<div>", {
        class: "table-container-header-title"
      })
      .html("Table " + value)
      .appendTo($tblContInd.find(".table-container-header"));
    $("<div>", {
        class: "table-container-header-count"
      })
      .html("<span id='table-container-header-count-" + value + "'>Seats Occupied</span>")
      .appendTo($tblContInd.find(".table-container-header"));
  });
  $(".table-container-individual").each(function(ind, elem) {
    counttable($(elem).attr("id"));
  });
});

您使用<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="parentDiv"> <input type="number" id="table-number" value="0" style="width: 2em;" /><button class="childButton">Add Table</button> </div> <div id="table-container-main"></div>的位置我会切换到id。 HTML要求每个ID都是唯一的。因此，许多class元素需要使用类来定义多个标题和标题等。

jQuery函数没有更新到新添加的apend元素

2 个答案: