提交按钮不会触发通过Ajax添加的项目 [英] Submit button does not trigger on items added via ajax

问题描述

我有一个包含项目列表的mvc视图.使用局部视图显示每个项目.用户可以编辑，添加和删除列表中的项目.所有这些都有效.

I have an mvc view that contains a list of items. Each item is displayed using a partial view. The user can edit, add, and delete items in the list. All of this works.

但是，如果用户添加了一个项目，则在刷新页面之前，无法编辑该项目.当用户选择提交"按钮时，不会发生该帖子.Chrome开发者工具中没有显示网络活动-没有任何反应.

However, if the user adds an item, the item cannot be edited until the page is refreshed. When the user selects the submit button, the post does not occur. There is no network activity shown in Chrome dev tools - nothing happens.

初始页面加载中包含的项目和通过ajax添加的项目的输出html相同.

The output html is the same for items that are included in the initial page load and items added via ajax.

<form action="/booking/UpdateRoomFlow" data-ajax="true" data-ajax-method="POST" data-ajax-success="update_27365547" id="roomflowform_27365547" method="post" novalidate="novalidate"></form>

我注意到，当我检查chrome中的元素时，表单不会包装表单字段，但是当我查看视图源时，它会包裹表单字段.

I noticed that when I inspect element in chrome, the form does not wrap the form fields, but when I look at view source, it does.

我尝试使用Ajax.BeginForm，并且尝试将html自己写出来，两种方法的结果相同.

I've tried useing Ajax.BeginForm and I've tried writting the html out myself, with the same results either way.

这是Ajax.BeginForm ...

This is the Ajax.BeginForm...

 @using (Ajax.BeginForm(
    "UpdateRoomFlow",null,
    new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = targetfunction
    },
        new { @id = @formid, @novalidate = "novalidate"}))
    {

有什么想法吗?

值得注意的是-该表单放置在td标签上方的tr标签内，这可能会导致问题，因为那是无效的标记-但是，除了通过ajax调用添加的项目外，它在所有情况下都有效.

Something to note - this form is placed inside a tr tag above a td tag, which could cause an issue as that is invalid markup - however, its working in all cases except items added via ajax call.

推荐答案

< script> 标签被剥离，并且由于 Ajax.BeginForm 在HTML中添加脚本标签以实现其功能，您最终会得到常规的旧表格，而该表格不执行任何操作.您无能为力，因为出于安全原因，浏览器会剥离< script> 标签.您唯一的办法是停止使用 Ajax.BeginForm 并编写您自己的JS来处理AJAX提交，然后可以将其包括在主视图或不会受到影响的外部文件中，而不会受到影响反正是个坏主意.出于这样的原因， Ajax.* 系列帮助器很糟糕.

<script> tags included in an HTML AJAX reponse are stripped, and since Ajax.BeginForm adds script tags to the HTML to enable it's functionality, you essentially end up with a regular old form that does nothing. There's nothing you can do about this, as the browsers strip <script> tags for security reasons. Your only recourse is to stop using Ajax.BeginForm and write your own JS to handle the AJAX submit, which you can then include in the main view or an external file which will not be affected, which is not a bad idea anyways. The Ajax.* family of helpers are awful just for reasons like this.

这篇关于提交按钮不会触发通过Ajax添加的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！