0

我在表格行中有两个控件，当我单击按钮时，我正在使用这两个控件添加一个新行。问题是，当我单击按钮以添加控件时，它正在添加，但不会为新控件触发 jQuery 代码。

代码的问题在哪里？

 <table id="tblIncidentProductOption">

 <tr>
 <th>Product</th>
 <th>Quantity</th>
 </tr>
 <tr class="Row">
 <td><input type="text" name="p0" id="p0" value="0"/></td>
 <td><input type="text" name="q0" id="q0" value="0"/></td>
 <td>
 <div data-corners="true" id="deldev"  class="ui-btn ui-shadow
 ui-btn-corner-all   ui-btn-inline ui-btn-icon-notext ui-btn-up-a"
 aria-disabled="false">
 <span class="ui-btn-inner"><input type="hidden"
 id="d0" class="ui-btn-hidden" name="d0"
 onclick="$(this).closest('tr').remove();" />
 <span class="ui-btn-text"></span>
 <span class="ui-icon ui-icon-delete ui-icon-shadow">
  </span>

  </span>

  </div>                       

    </td>

      <td class="tot">
  <input type="text" disabled="disabled" id="t0"  value="0" class="total" />
      </td>
  </tr>
 </table>
The jQuery code for the button click:

$('#btnAddOption').on('click', function () {
    var $tr = $('#tblIncidentProductOption')
        .find("tr:last").clone();

    $tr.find("input").attr("name", function () {
        var parts = this.id.match(/(\D+)(\d+)$/);
        return parts[1] + ++parts[2];
    }).attr("id", function () {
        var parts = this.id.match(/(\D+)(\d+)$/);
        return parts[1] + ++parts[2];
    }).attr("value", "0");
    //  $tr.find("td input").each(function () { $(this).attr("value", "0");});
    $tr.find("td:nth-child(3)").show();
    $tr.find("input[type='hidden']").attr("type", "button");

    $('#tblIncidentProductOption')
        .find("tr:last").after($tr);
});

用于组合两个文本框值并添加两个隐藏字段的 jQuery 代码：

$('#tblIncidentProductOption  tr').each(function () {
    $("input").each(function () {
        $(this).keyup(function () {
            var sum = "";
            var thisRow = $(this).closest('tr');
            var total = "";
            $(thisRow).find("td:not(.tot) input").each(function () {
                sum = sum + '-' + $(this).val();
            });
            sum = sum.slice(1).slice(0,-1);
            $(thisRow).find(".total").val(sum);
            $('input[class*="total"]').each(function () {
                total = total + '|' + $(this).val();
            });
            //$('#tblIncidentProductOption tr').each(function () {
            //    alert('tr');
            //    $('td:nth-child(4) input').each(function () {
            //        total = total + '|' + $(this).val();
            //    });
            //});
            total = total.slice(1).slice(0,-1);
            $('#result').val(total);
            return false;
        });
    });
});
4

1 回答 1

0

您将事件处理程序绑定到执行第二个 javascript 片段时存在的每个元素。因此，当您添加新元素时，您还没有将事件处理程序绑定到它们。您可以通过切换到事件委托来解决此问题、简化代码并可能提高性能。我无法使用您提供的内容来启动和运行，但我怀疑更改这三行：

$('#tblIncidentProductOption  tr').each(function () {
    $("input").each(function () {
        $(this).keyup(function () {

至：

$('#tblIncidentProductOption').on('keyup', 'input', function(event) {
  var target = event.target;

然后用目标替换对“this”的引用可能会奏效。

简短而有趣的是，现在，您无需将处理程序绑定到每个输入，而是将处理程序绑定到父元素，并在 keyup 事件通过其目标与“输入”选择器匹配时做出反应。

于 2013-06-12T06:36:11.090 回答