jquery没有从模态中解雇

Question

问题：此表单不会提交。

（内部索引直接位于布局内）

<!-- Modal -->
<div id="modalCategory" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">    
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>

            <form class="form-horizontal" id="frmCategory" name="frmCategory">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-lg-4">Category Name</label>
                        <input type="text" class="form-control" id="txtName" required />
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Category Description</label>
                        <textarea class="form-control" id="txtDescription" cols="22"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" id="categorySubmit" class="btn btn-info" data-dismiss="modal" value="OK" />
                </div>
            </form>    
        </div>    
    </div>
</div>

@section scripts{        
    <script type="text/javascript" src="~/ViewScripts/Admin/StoreAdmin.js"></script>    
}

根据建议更新了JS：

$("body").on("submit", "#frmCategory", function () {
    //do your stuff here
    alert('foo1');
});

$("#modalCategory").on("submit", "#frmCategory", function () {
    alert("foo2");
});

$(function () {    
    LoadActiveTab();

    function LoadActiveTab() {    
        var activeTab = $("#storeNav > li[class='active'] > a");
        LoadTabData(activeTab);    
    }

    function LoadTabData(container)
    {
        var hrefVal = $(container).attr("href");
        var $detailDiv = $(hrefVal);
        var url = $(container).data('url');

        $detailDiv.empty();

        $.get(url, function (data) {
            $detailDiv.append(data);
        });
    }

    $(".btnStoreAdmin").on("click", function (evt) {    
        LoadTabData(this)    
    });

    //Product Categories
    $("#btnAddNew").on("click", function () {    
        ClearModal();
        $(".modal-title").append("<div class='h3'>Add Product Category</div>");    
    });

    function ClearModal() {
        $(".modal-title").empty();
        $('#frmCategory')[0].reset();
    }

    function BuildModal(modalId) {

    }

    $("#frmCategory").submit(function () {    
        var data = {    
            name: $("#txtName").val(),
            description: $("txtDescription").val()    
        };

        $.ajax({
            url: '/Admin/AddProductCategory',
            type: "POST",
            data: data,
            success: function (data, textStatus, jqXHR) {
                ClearModal();
                $("#modalCategory").toggle();
            },
            error: function (jqXHR, textStatus, errorThrown) {

            }
        });    
    });

    $("body").on("submit", "#frmCategory", function () {
        //do your stuff here
        alert('foo3');
    });

    $("#modalCategory").on("submit", "#frmCategory", function () {
        alert("foo4");
    });
});

我尝试的事情

1. 将模态从部分移动到承载部分
的索引页面
2. $（＆＃34;＃frmCategory＆＃34;）。on（＆＃34; submit＆＃34;，function（）（）{}）;
3. $（＆＃34; #categorySubmit＆＃34;）。on（＆＃34; click＆＃34;，function（）（）{}）;
4. $（document）.on（＆＃34; submit＆＃34;，＆＃34;＃frmCategory＆＃34;，function（）{}）;
5. 内部和外部准备功能的所有变化
6. 将我的jquery包从页面的底部移到顶部。
7. 同时使用name，id和both作为表单
上的属性

由于

Answer 1

将您的提交事件更改为：

$(document).on('submit', 'form[name="frmCategory"]', (function () {

另一种可能的解决方法是：

<form class="form-horizontal" name="frmCategory" onsubmit="mySubmit(this)">

添加全局函数：

function mySubmit(obj) {
  ....your code...
}

Answer 2

您的模态内容最初不在DOM中，因此您没有该元素。 将内容添加到模态后，您可以尝试添加提交事件（在成功功能上）。

或类似$('#yourmodal').on('submit', '#yourformid', function(){});

并将ID添加到表单中，目前您只有一个类和一个名称...

Answer 3

从提交按钮中删除data-dismiss =“modal”并捕捉此事件

$('body').on('submit', '#frmCategory',function () {
    //do your stuff here
});

Answer 4

＆＃13;

＆＃13;

$("body").on("submit", "#frmCategory", function () {
    //do your stuff here
    alert('foo1');
});

$("#modalCategory").on("submit", "#frmCategory", function () {
    alert("foo2");
});

$(function () {

    LoadActiveTab();

    function LoadActiveTab() {

        var activeTab = $("#storeNav > li[class='active'] > a");
        LoadTabData(activeTab);

    }

    function LoadTabData(container)
    {
        var hrefVal = $(container).attr("href");
        var $detailDiv = $(hrefVal);
        var url = $(container).data('url');

        $detailDiv.empty();

        $.get(url, function (data) {
            $detailDiv.append(data);
        });
    }

    $(".btnStoreAdmin").on("click", function (evt) {

        LoadTabData(this)

    });

    //Product Categories
    $("#btnAddNew").on("click", function () {

        ClearModal();
        $(".modal-title").append("<div class='h3'>Add Product Category</div>");

    });

    function ClearModal() {
        $(".modal-title").empty();
        $('#frmCategory')[0].reset();
    }

    function BuildModal(modalId) {

    }

    $("#frmCategory").submit(function () {

        var data = {

            name: $("#txtName").val(),
            description: $("txtDescription").val()

        };

        $.ajax({
            url: '/Admin/AddProductCategory',
            type: "POST",
            data: data,
            success: function (data, textStatus, jqXHR) {
                ClearModal();
                $("#modalCategory").toggle();
            },
            error: function (jqXHR, textStatus, errorThrown) {

            }
        });

    });

    $("body").on("submit", "#frmCategory", function () {
        //do your stuff here
        alert('foo3');
    });

    $("#modalCategory").on("submit", "#frmCategory", function () {
        alert("foo4");
    });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Modal -->
<div id="modalCategory" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>

            <form class="form-horizontal" id="frmCategory" name="frmCategory">
                <div class="modal-body">


                    <div class="form-group">
                        <label class="control-label col-lg-4">Category Name</label>
                        <input type="text" class="form-control" id="txtName" required />
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Category Description</label>
                        <textarea class="form-control" id="txtDescription" cols="22"></textarea>
                    </div>


                </div>
                <div class="modal-footer">
                    <input type="submit" id="categorySubmit" class="btn btn-info" data-dismiss="modal" value="OK" />
                </div>
            </form>

        </div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

首先，$("#frmCategory")与任何元素都不匹配，因为没有ID为frmCategory的元素。根据您现在的情况，您应该使用$("[name=frmCategory]").submit(function(){...})代替。

除此之外，您的脚本不包含在<script>标记内。

另一种可能性是，如果您的模态最初不存在，那么您的事件处理程序将不会附加到表单，那么您将需要使用@ Azim的回答建议的事件委派。