mvc模式删除按钮未使用jquery触发

Question

我有一个用于删除记录的 partialView。我创建了一个按钮来处理删除，但我似乎无法获得触发 jquery 的按钮。

如果我将函数“deleteRecord”添加到按钮，jquery 将触发

<button class="btn btn-primary" data-id=@ViewData["id"] id="btnContinueDelete" onclick="deleteRecord(); return false;">Delete Sales Order</button>

但是，当我使用“id”执行 jquery 时，按钮不会触发

<button class="btn btn-primary" data-id=@ViewData["id"] id="btnContinueDelete">Delete Sales Order</button>

用于执行部分视图

<a class="btn deleteOrder btn-danger" data-modal="" href="@Url.Action("_DeleteConfirmation", "WebOrder", new { id = @Model.Web_Order_ID, shipToName=@Model.Ship_To_Name }) role="button" data-toggle="modal">
    <span class="glyphicon glyphicon-edit"></span>
</a>

这是部分视图

<!-- Modal -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Ship_To_Name</h3>
</div>
<div class="modal-body">
    <p>
        Are you sure you want to delete this Sales Order <label id="shipto-name">@ViewData["name"]</label> ID:
        <label id="data-id">@ViewData["id"]</label>
    </p>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-primary" data-id=@ViewData["id"] id="btnContinueDelete" onclick="writeRecord(); return false;">Delete Sales Order</button>

</div>

这是 jquery：

$(function () {
    $.ajaxSetup({ cache: false, async: true });

    $("a[data-modal]").on("click", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                keyboard: true
            }, 'show');

            bindForm(this);
        });
        return false;
    });

    //Not working funtion
    $('#btnContinueDelete').click(function() {
        var id = $("button[data-id]").val();
        $.post(Url.Action("_DeleteConfirmation", "WebOrder"), { id: id }, function(data) {
            alert("data deleted");
        });
    });
});

// Working function
function writeRecord() {
    var id = $("button[data-id]").val();
    $.post(Url.Action("_DeleteConfirmation", "WebOrder"), { id: id }, function (data) {
        alert("data deleted");
    });
}

Answer 1

因为您的局部视图是动态加载的，所以当您注册点击事件时将不起作用，因为到那时该 id 不存在。

您将需要使用on，例如：

$('#myModalContent').on('click', '#btnContinueDelete', function(event){
        var id = $("button[data-id]").val(); // remember change this
        $.post(Url.Action("_DeleteConfirmation", "WebOrder"), { id: id }, function(data) {
            alert("data deleted");
        })
});

有关on 的更多信息，请查看jquery 网站：http://api.jquery.com/on/