發現新的DOM元素和改變輸入框 - JQuery的

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按鈕 - 「添加新的輸入框」）
• 文本被輸入到輸入框（見#tab1輸入字段）

而且不檢測的變化，其中：

屬性
• HTML元素被改變（見#tab3按鈕 - 「隱藏輸入框」）

當然MutationObserver就會向變化的時候，HTML屬性發生變化（我不希望），但它不會當用戶鍵入一個輸入框（我確實需要）時標誌。出於這個原因，我想MutationObserver對象不適合這個問題（糾正我，如果我錯了）。

我還有什麼其他的東西可以用嗎？

我的情景：只是爲了給您更多的上下文，我正在爲包含多個選項卡的數據錄入應用程序創建保存提示。在移動到下一個標籤之前忘記保存更改是很容易的，但有時候您可能想要移動到另一個標籤而不保存。我試圖向用戶顯示一條警告，通知他們他們在單擊下一個選項卡時沒有保存。點擊一個按鈕後，可以隱藏/顯示某些字段，即使它們未輸入任何新值，該按鈕也會檢測爲DOM的更改。一些值可以通過點擊一個按鈕通過ajax從另一個位置獲取，儘管用戶沒有輸入任何內容，但仍應該標記爲需要在DOM更改時保存的更改。

Answer 1

要檢測從tab2添加或刪除的新元素，只添加和刪除元素，可以使用events：DOMNodeInserted DOMNodeRemoved，而對於輸入字段的更改，您可以使用輸入事件。 這些事件已被棄用，因爲它們將從網絡中刪除。 爲了更好的說明，請參閱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>