Question

我有一个主视图调用索引，其中包含一些文本框，并允许通过部分视图调用将其他文本框添加到屏幕。主视图引用了一个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
});

```

听取正文中的事件可能过多，您可能想要听某些特定形式或元素中的“更改”事件。

Jquery / Javascript在部分视图上不起作用

4 个答案: