jQuery 为 table 中的每一行输入文本触发模糊

Question

我对 jQuery blur 的通用事件处理程序有疑问，我有一个页面可以动态添加输入文本行以捕获数据，其中一项要求是在每个输入框后保存数据以防万一，并且能够继续输入所有数据。

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

$("#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 为 table 中的每一行输入文本触发模糊

jQuery blur fires for each row of input text in a table

generics

jquery

blur