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
});

```

监听正文中的事件可能太多了，您可能想要监听 'change' 某些特定形式或元素中的事件。

Jquery/Javascript 不适用于局部视图

Jquery/Javascript does not work on partial view

javascript

asp.net-mvc

jquery