<function> 未在 HTMLButtonElement.onclick 处定义

Question

美好的一天，

我有一个按钮

<button id="4" onclick="UpdateStatus(this.id)" class="btn btn-default" type="button">update</button>

正在调用 ajax 函数

   <script>
    $(document).ready(function () {            

        function UpdateStatus(Id) {                
            $.ajax({
                type: "Post",//or POST
                url: '/myController/UpdateSomething?Id=' + Id,
                //  (or whatever your url is)
                data: { data1: var1 },               
                success: function (responsedata) {
                    // process on data
                    alert("got response as " + "'" + responsedata + "'");
                }
            });
        }
    }
</script>

我的问题是我收到一个错误消息：

UpdateStatus is not defined at HTMLButtonElement.onclick

我做错了什么？谢谢

更新

当我尝试运行这个代码时

  @section scripts
  {   
   <script>
    $(document).ready(function () {
    //Carga datos del curso
    console.log("asdf");   
});</script>}

我的控制台中没有收到消息。

Answer 1

问题是，您正在 jQuery 的 document.ready 事件中定义您的方法定义。解析和呈现按钮标记时，未定义 JavaScript 方法，因此出现错误。

jquery ready 方法稍后在文档准备好后执行（HTML 的解析和渲染已经完成，DOM 可以安全被访问）。至此，HTML 已经呈现。

在它外面定义它。

<script>

function UpdateStatus(Id) {
   alert('UpdateStatus called');                
}
$(function () {

});

</script>

另一种选择是使用 unobutrusive JavaScript。因此，不是将点击事件处理程序连接到按钮标记，而是稍后在触发文档就绪时连接。

<button id="4" class="btn btn-default" type="button">update</button>

并连接点击事件

$(function () {
    $("#4").click(function (e) {
        e.preventDefault();
        alert('User clicked');
    });
});

Answer 2

这绝对是一个范围问题，因为UpdateStatus定义在document.ready()函数的范围内。您可以将 UpdateStatus 声明为 document.ready() 块之外的变量，并在其中声明一个函数：

var UpdateStatus;

$(document).ready(function () {
    UpdateStatus = function () {
        var buttonId = $('#4').attr('id');

        $.ajax({
            type: "POST",
            url: '/myController/UpdateSomething',
            data: { Id: buttonId, ... }, // setting parameters            
            success: function (responsedata) {
                // process on data
                alert("got response as '" + responsedata + "'");
            }
        });
    }
});

此外，基于标准事件注册模型和 separation of concerns，我建议您通过检索按钮 ID 来使用不显眼的 JavaScript：

$(document).ready(function () {
    $('#4').click(function() {
        var buttonId = $(this).attr('id');

        $.ajax({
            type: "POST",
            url: '/myController/UpdateSomething',
            data: { Id: buttonId, ... }, // setting parameters            
            success: function (responsedata) {
                // process on data
                alert("got response as '" + responsedata + "'");
            }
        });
    });
});

因为您正在使用 AJAX POST，所以不需要在 URL 中使用查询字符串参数，例如 url: '/myController/UpdateSomething?Id=' + Id.

<function> 未在 HTMLButtonElement.onclick 处定义

<function> is not defined at HTMLButtonElement.onclick

asp.net-mvc

asp.net-ajax