Question

我正在尝试使用jQuery在表中动态绑定列。但是当尝试单击“btnASizeR”并且“btnWdDelete”按钮事件不起作用时，单击事件不起作用。任何想法都将不胜感激。

$(function() {
  var i = 0;
  $('#btnASizeR').click(function() {
    /* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
    var i = $("#WireDimTbl tbody>tr").length + 1;
    /* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
    var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' value='2.00' />";
    var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' value='3.00' />";
    var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' value='1' />";
    var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' value='1' />";
    var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
    $("#WireDimTbl tbody").append(markup);
  });
  $('#btnWdDelete').click(function() {

    $("#WireDimTbl tbody>tr:last").remove();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td class='text-left'><strong>Wire Dimensions</strong></td>
</tr>
<tr>
  <td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>

  <td>
    <input type="button" id="btnASizeR" value="AddSizeRange" />
    <input type="button" id="btnWdDelete" value="Delete" />
    <table id="WireDimTbl" class="table table-bordered">
      <thead>
        <tr>
          <th class="text-center">Size Range Min (mm)</th>
          <th class="text-center">Size Range Max (mm)</th>
          <th class="text-center">Tolerance (-)mm</th>
          <th class="text-center">Tolerance (+) mm</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </td>
</tr>

Answer 1

您提到您正在动态加载表。你的意思是当页面第一次加载时，表格丢失并且稍后会添加吗？

如果是这种情况，您确定调用了绑定点击事件的代码吗？上面的例子绑定了page_load上的事件，但是，如果页面上的按钮尚未可用，则它无法绑定它。 JQuery不会自动绑定未来的元素。

在绑定click事件之前尝试设置var imgPromises = []; for(var i = 0; i < inputs.length; i++) { if(inputs[i].checked == true){ var imgForDelPromise = new Promise(function (resolve) { userPics_query.get(inputs[i].id, { success: function(picForDelete) { resolve(picForDelete); }, error: function(picForDelete, error) { alert("Error: " + error.code + " " + error.message); } }); }); imgPromises.push(imgForDelPromise); } } Promise.all(imgPromises).then(function (imgs) { destroyItAll(imgs); });以确保JQuery实际上可以找到该按钮。

尝试使用jquery

1 个答案: