jQuery Click Event CheckBox 更改了 Ajax 调用

jQuery Click Event CheckBox Changed Ajax Call

本文关键字：Ajax 调用 Click Event CheckBox jQuery      更新时间：2023-09-26

我有三个复选框，它们从模型中填充了选中/未选中的值。我正在使用 Ajax 帖子按钮单击事件来调用每个复选框更改事件的控制器操作，以便更新数据库。

以下是其中一个复选框的代码（除了选择器 ID 之外，它们都是一样的）：

 $(document).ready(function () {
    //document.getElementById('UpdateButton').onclick = function () {
    $("UpdateButton").click = function () {
        $('#NatAm').change(function () {
            // if ($('#NatAm').is(':checked')) {
            $.ajax({
                //url: '@Url.Action("NativeUpdate", "Transactions")',
                    url: '/Transactions/NativeUpdate',
                    //data: { isNativeUp: true },
                    type: 'POST',
                    dataType: "json"
                });
                //}
            });

编辑（HTML/视图代码）：

 @Html.CheckBox("NatAm", (bool)@ViewBag.NativeAm)
 <input name="UpdateButton" id="UpdateButton" type="submit" value="Update" style="margin-left: 15px; margin-top: 3px;" class="btn btn-success" />

我无法让它工作。在添加按钮之前，ajax 帖子工作正常。感谢您的帮助！

您的点击处理程序不正确。您需要传入按钮的 id 并使用 jQuery 单击处理程序。您也不需要嵌套处理程序：

$(document).ready(function() {
  $("#UpdateButton").click(update);
  $('#NatAm').change(update);
});
function update() {
  $.ajax({
    url: '/Transactions/NativeUpdate',
    type: 'POST',
    dataType: 'json'
  });
}

JSFiddle 演示：https://jsfiddle.net/vLzwuwdo/

你告诉JQuery寻找"UpdateButton"标签，而这些标签在你的例子中是不存在的。您缺少指示按钮中 ID 的 #。

试试这个

$(document).ready(function () {
//document.getElementById('UpdateButton').onclick = function () {
$("#UpdateButton").click(function () {
    $('#NatAm').change(function () {
        // if ($('#NatAm').is(':checked')) {
        $.ajax({
            //url: '@Url.Action("NativeUpdate", "Transactions")',
                url: '/Transactions/NativeUpdate',
                //data: { isNativeUp: true },
                type: 'POST',
                dataType: "json"
            });
            //}
        }));

  1. id在同一文档中应该是唯一的（NatAm和UpdateButton），用全局类替换重复的将解决第一个问题。

  2. 您不应该在另一个元素中定义事件，因为每次触发第一个时，它都会为元素创建新事件，在您的情况下，每次单击新的更改事件时，都会创建并附加到带有 NatAm 的第一个元素。

希望这有帮助。

相关文章：