Question

查看以下HTML：

<div id="tab1">
    <input type="text">
</div>

<div id="tab2">
    <input type="text">
    <button>Add New Input Box</button> <!-- Adds another <input type="text"> in tab -->
</div>

<div id="tab3">
    <input type="text">
    <button>Hide Input Box</button> <!-- Adds style 'display:none' to input -->
</div>

我正在寻找一种使用JQuery检测DOM更改的方法。我知道MutationObserver个对象，这些很好，但我只想检测以下场景中的变化：

添加了新的HTML元素（请参阅#tab2按钮 - ＆＃39;添加新的输入框＆＃39;）
文本输入到输入框（请参阅#tab1输入字段）

并且不检测更改位置：

HTML元素属性已更改（请参阅#tab3按钮 - ＆＃39;隐藏输入框＆＃39;）

当然MutationObserver会在HTML属性发生变化时标记更改（我不想要）但是当用户输入输入框（我确实需要）时它不会标记。出于这个原因，我认为MutationObserver对象不适合这个问题（如果我错了，请纠正我）。

我还可以使用其他任何东西吗？

我的场景：为了给您提供更多上下文，我正在为包含多个标签的数据输入应用创建保存提示。在移动到下一个选项卡之前很容易忘记保存更改，但有时您可能想要移动到另一个选项卡而不保存。我试图向用户显示一条警报，通知他们在点击下一个标签时他们没有保存。某些字段可以在单击按钮时隐藏/显示，MutationObserver将检测到这些字段是对DOM的更改，即使它们可能没有输入任何新值。通过ajax点击按钮可以从其他位置拉出一些值虽然用户没有输入任何内容，但仍应将其标记为需要在DOM更改时保存的更改。

Answer 1

要检测从tab2添加或删除的新元素，只添加和删除元素，您可以使用事件：DOMNodeInserted DOMNodeRemoved，而对于输入字段的更改，您可以使用输入事件。不推荐使用这些事件，因为它们将从Web中删除。有关更好的说明，请参阅Mutation events

$(function () {
  $('div,  #tab1 input').on('DOMNodeInserted DOMNodeRemoved webkitTransitionEnd input', function (event) {
    switch (event.type) {
      case 'input':
        if (event.target.parentNode.id == 'tab1') {
          event.stopImmediatePropagation();
          alert('Content changed');
        }
        break;
      case 'DOMNodeInserted':
        if (event.target.parentNode.id == 'tab2') {
          alert('Content added!');
        }
        break;
      case 'DOMNodeRemoved':
        if (event.target.parentNode.id == 'tab2') {
          alert('Content removed');
        }
        break;
    }
  });
  $('#add').on('click', function (e) {
    $(this).after('<input type="text">');
  });
  $('#remove').on('click', function (e) {
    $(this).siblings('input').remove();
  });
  $('#tab3 button').on('click', function (e) {
    $(this).siblings('input').toggle();
  })
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div id="tab1">
    <input type="text">
</div>

<div id="tab2">
    <input type="text">
    <button id="add">Add New Input Box</button>
    <button id="remove">Remove All Input Boxes</button>
</div>

<div id="tab3">
    <input type="text">
    <button>Hide/Show Input Box</button>
</div>

检测新的DOM元素并更改输入框 - JQuery

1 个答案: