.focusout()在调用和使用.append()之后不工作

时间:2014-12-04 03:01:16

标签: javascript jquery

在使用.focusout()方法后,我无法弄清楚为什么.append()没有被调用。我有一个按钮,可以在表格中添加另一行input

现在在该表中,我检查用户是否正在关注输入。当它最初从一行开始时它起作用,但在我点击按钮.append()tbody的新行之后,它只是大便。

我已经尝试了.focusout().on("focusout"),但都没有成功。

$(document).ready(function() {
    $("#addRow").click(function () {
        $("tbody").append("<tr><td><input type='text' /></td><td>World</td></tr>");
    });
//    $("tbody input").focusout(function () {
//        alert("Focus Out");
//    });

    $("tbody input").on("focusout", function() {
        alert("Focusing out");
    });
});

$(document).ready(function() {
  $("#addRow").click(function() {
    $("tbody").append("<tr><td><input type='text' /></td><td>World</td></tr>");
  });
  //    $("tbody input").focusout(function () {
  //        alert("Focus Out");
  //    });

  $("tbody input").on("focusout", function() {
    alert("Focusing out");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button type="button" id="addRow">Add Row</button>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text" />
      </td>
      <td>Hello</td>
    </tr>
  </tbody>
</table>
<div class="detector"></div>

1 个答案:

答案 0 :(得分:2)

应该是这样的:

$("tbody").on("focusout", "input", function() {
    alert("Focusing out");
});

请注意&#34;输入&#34;被移动到on的第二个参数,这样它就可以应用于input上的所有未来tbody,而不仅仅是第一个被调用时存在的{{1}}。{{1}}我建议你阅读jQuery.on docs