Question

我有一个jQuery模糊的通用事件处理程序的问题，我有一个动态可以添加输入文本行来捕获数据的页面，其中一个要求是在每个输入框之后保存数据以防万一会发生某些事情并能够继续输入所有数据。

代码触发并在数据库中输入或更新数据，但它会发送它的次数与行数一样多，并且看到事件在不同的线程中，数据不准确。

$("#detectors tbody input[type=text]").blur(function(e) {
  var elementid = $(this);
  var j = elementid.attr("id");
  if (j != "addNewDet") {
    var eledId = j.slice(-1);
    var eidD = "";
    if (!isNaN(eledId)) {
      eidD = parseInt(j.slice(-1));
    }
    //var q = elementid.id.val();
    var dsn = "#det_serialnumber" + eidD;
    var dmi = "#det_ptMdId" + eidD;
    var dmp = "#det_mdpartno" + eidD;
    var dc = "#det_Coil" + eidD;
    var dcp = "#det_casephase" + eidD;
    var id = tid;
    var ptmdid = $(dmi).val();
    var part = $(dmp).val();
    var ccoil = $(dc).val();
    var sn = $(dsn).val();
    var casep = $(dcp).val();

    $.ajax({
      url: "/Home/InsertIntoDB",
      data: {
        mdid: ptmdid,
        partno: part,
        coil: ccoil,
        serialnumber: sn,
        casephase: casep
      },
      dataType: "json",
      type: "POST",
      success: function(data) {
        var resp = data[0];
        $(dmi).val(resp.ptMdId);
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="detectors">
  <thead>
    <tr>
      <th>Serial number</th>
      <th>MD part #</th>
      <th>Coil</th>
      <th>Case phase</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input class="form-control text-box single-line" id="det_serialnumber1" name="det.serialnumber" type="text" value="" />
        <input name="det.ptMdId" class="text-box single-line" id="det_ptMdId1" type="hidden" value="0">
      </td>
      <td>
        <input class="form-control text-box single-line" id="det_mdpartno1" name="det.mdpartno" type="text" value="" />
      </td>
      <td>
        <input class="form-control text-box single-line" id="det_Coil1" name="det.Coil" type="text" value="" />
      </td>
      <td>
        <input class="form-control text-box single-line" id="det_casephase1" name="det.casephase" type="text" value="" />
      </td>
    </tr>
    <tr>
      <td>
        <input class="form-control text-box single-line" id="det_serialnumber2" name="det.serialnumber" type="text" value="" />
        <input name="det.ptMdId" class="text-box single-line" id="det_ptMdId2" type="hidden" value="0">
      </td>
      <td>
        <input class="form-control text-box single-line" id="det_mdpartno2" name="det.mdpartno" type="text" value="" />
      </td>
      <td>
        <input class="form-control text-box single-line" id="det_Coil2" name="det.Coil" type="text" value="" />
      </td>
      <td>
        <input class="form-control text-box single-line" id="det_casephase2" name="det.casephase" type="text" value="" />
      </td>
    </tr>
  </tbody>

Answer 1

我已经更改了我的代码，为每一行创建单独的事件处理程序，我找不到另一个解决方案，在我的代码中，我添加了模糊事件选项，包括变量中的ajax调用，并在同一时间初始化事件我动态添加行：dmi将保存添加的元素id，

var blurOption = {
  url: "/Home/InsertIntoDB",
  data: {
    mdid: ptmdid,
    partno: part,
    coil: ccoil,
    serialnumber: sn,
    casephase: casep
  },
  dataType: "json",
  type: "POST",
  success: function(data) {
    var resp = data[0];
    $(dmi).val(resp.ptMdId);
  }

添加行后

$(dmi).blur(blurOption);

jQuery模糊触发表

1 个答案: