jQuery / Javascript在部分視圖上不起作用

Question

我有一個主視圖調用Index，其中包含一些文本框，並允許通過部分視圖調用將其他文本框添加到屏幕。 主視圖引用一個js文件，該文件具有以下代碼：

外部JS文件：

$("input[type='text']").on("change", function () {
 alert("here");
});

每當我修改由主視圖加載的文本框中的值時，代碼就起作用。 但是，當我嘗試更改由部分視圖添加的文本框的值時，它什么也不做。

根據我的理解，live（）方法應該處理dom中的當前元素以及添加到dom中的任何將來元素。 現在將其替換為.on（）。 因此，我正在使用.on（）。 有什么新東西可以替代我不知道的.on（）嗎？ .live（）和.on（）在我的情況下不起作用。

為了好的做法，我不想再將js / jquery代碼添加到部分視圖中以使其起作用。 我希望避免重復並實施良好做法。 任何幫助表示贊賞。

Answer 1

當加載頁面以將事件委托給動態添加的元素時， on()必須綁定到DOM中已經存在的元素：

$(document).on("change", $("input[type='text']"), function () {
  alert("here");
});

可以使用任何靜態父元素代替$(document)來委托事件。

Answer 2

嘗試使用以下代碼：

$(document).on("change", "input[type='text']", function () {
 alert("here");
});

可以在兩個輸入的任何父節點上更改文檔

Answer 3

您應該使用事件委托。 將所有輸入內容放入容器div中，並將事件放在此父元素上。 它適用於動態添加的dom元素。 因此，如果您將它們放入：

<div class="container">
  <input ...>
  <input ...>
  <input ...>
</div>

jQuery將是：

$('.container').on('change','input[type="text"]', function(e) {
  var el =e.target;  //if you need the element clicked on
  alert('here');
});

Answer 4

因此，基本上，您正在嘗試委派事件。 為此，按照jQuery文檔所述，您需要使用以下代碼：

```

$('body').on('change', 'input[type="text"]', function(e) { 
  console.log(e.target); // the input that triggered the event
  console.log(e.currentTarget); // the body element
});

```

偵聽身體中的事件可能太多，您可能希望偵聽某些特定形式或元素內的“變化”事件。