JQuery 事件不适用于 ASP.NET MVC 部分视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2195168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery events don't work with ASP.NET MVC Partial Views
提问by dritan
I am trying to get JQuery events to work with partial views in ASP.NET MVC. However, after you load a partial view through Ajax, JQuery seems not able to fire events for any of the elements in the partial view. I suspect that this issue will also happen if you are using other frameworks or JavaScript libraries to load partial html code with Ajax.
我正在尝试让 JQuery 事件与 ASP.NET MVC 中的部分视图一起使用。但是，通过 Ajax 加载分部视图后，JQuery 似乎无法为分部视图中的任何元素触发事件。我怀疑如果您使用其他框架或 JavaScript 库通过 Ajax 加载部分 html 代码，也会发生此问题。
For instance, consider the following example:
例如，请考虑以下示例：
Controller:
控制器：
public class TestController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult LoadPartialView()
{
return View("PartialView");
}
}
Index.aspx
索引.aspx
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
alert('button clicked');
});
});
</script>
<div>
<%using(Ajax.BeginForm("LoadPartialView", new AjaxOptions { UpdateTargetId="PartialView"})){ %>
Click <input type="submit" value="here" /> to load partial view.
<% } %>
</div>
<br /><br />
<% Html.RenderPartial("PartialView"); %>
PartialView.ascx
局部视图.ascx
<div id="PartialView">
Click <input type="button" id="button" value="here"></input> to display a javascript message.
</div>
Once the page loads for the first time, you can click on the "Click here to display a Javascript message" and you will get a Javascript alert message that says "button clicked". However, once you click on the "Click here to load partial view", clicking on the button that is supposed to bring the Javascript alert message doesn't have any effect. It seems that the 'click' event is not being fired anymore.
页面首次加载后，您可以单击“单击此处显示 Javascript 消息”，您将收到一条 Javascript 警报消息，显示“按钮已单击”。但是，一旦您单击“单击此处加载部分视图”，单击应该带来 Javascript 警报消息的按钮就没有任何效果。似乎不再触发“点击”事件。
Does anyone know why this issue occurs with JQuery and how to fix? This issue also occurs with other JQuery plugins that use events.
有谁知道为什么 JQuery 会出现这个问题以及如何解决？其他使用事件的 JQuery 插件也会出现此问题。
回答by PEOudin
I have found a solution :
我找到了一个解决方案：
Juste try to make :
Juste 尝试使：
$(document).on("click", "YOUR_SELECTOR", function(e){
/// Do some stuff ...
});
Instead of :
代替 ：
$("YOUR_SELECTOR").on("click", function(e){
/// Do some stuff ...
});
回答by mkedobbs
The easiest way to handle this would be to utilize the live() method:
处理这个问题的最简单方法是使用 live() 方法：
<script type="text/javascript">
$(document).ready(function() {
$("#button").live('click', function() {
alert('button clicked');
});
});
</script>
回答by Mohammad Imran
<script>
$(document).ready(function(){
$("input[id^=button]").live('click', function() {
//Your Code
});
});
</script>
回答by Farid Amiri
None of These solution worked for me, so i had to do these things to work:
这些解决方案都不适合我，所以我必须做这些事情才能工作：
- I created a partial view and put all my JavaScript references in that file
- I created a div like this
- 我创建了一个局部视图并将我所有的 JavaScript 引用放在该文件中
- 我创建了一个这样的 div
<div id="js">
@Html.Partial("[Your_Path]")
</div>
3.When i load some partial page after that i do this in JavaScript:
3.当我加载一些部分页面之后，我在 JavaScript 中执行此操作：
$('#js').load('/Your_Controller/Your_Partial_function');
回答by John Landheer
What also works for me is to put the jquery stuff in the partial view. Just make sure only controls in the loaded view are referenced, otherwise you may get a handler that is registered twice for a control.
对我也有用的是将 jquery 的东西放在局部视图中。只要确保只引用加载视图中的控件，否则您可能会得到一个为控件注册两次的处理程序。
PartialView.ascx:
部分视图.ascx：
<div id="PartialView">
Click <input type="button" id="button" value="here"></input> to display a javascript message.
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#PartialView").find("#button").click(function() {
alert('button clicked');
});
});
</script>
