未捕获的ReferenceError：函数未定义jQuery

我试图在单击按钮时调用jQuery函数。 但我得到的错误如下：

未捕获的ReferenceError：未定义update_question_ajax

HTML：

<button type="button" class="update-question- button" onclick="update_question_ajax()" style="outline: 0 none;"> 

jQuery的：

 $(function(){ function update_question_ajax(id) { var test = $('.edit-question-' + id + ' input[name="translated"]'); var editedQuestionId = $('#question-id-'+id).val(); var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(); var modalObj = $('#myQuestionModal'); $.ajax({ type: "POST", url: "", data:{ edited_question: editedQuestionObj, question: editedQuestionId }, success: function(){ modalObj.dialog('close'); modalObj.html(''); }, complete: function(){ //window.location.reload(true); } }); return false; } }); 

如果你们帮我解决这个问题，我感激不尽。

谢谢！

Answer 1

似乎是一个范围问题。 您已经在另一个函数中定义了该函数。 你还应该尽量避免将php放在javascript中。 从技术上讲它是有效的，但不是很好的forms。

删除了内联单击处理程序。

然后我们创建一个自执行函数，将$ jQuery传递给jQuery，这使得所有内容都能够使用“$”作为jQuery。 然后定义按钮的单击处理程序并使用数据属性来传递id，而不是使用JS混合在JS中并将其放在DOM中。 感觉有点干净。 此外，请确保在文档底部加载jquery /其他脚本，就在关闭正文之前。 这样您就不需要.ready，因为您的文档已经加载。

 (function($){ // Define click handler. $('button.update-question').on('click', function(e){ e.preventDefault(); var id = $(this).data('id'); update_question_ajax(id); }); function update_question_ajax(id) { var test = $('.edit-question-' + id + ' input[name="translated"]'), editedQuestionId = $('#question-id-'+id).val(), editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(), modalObj = $('#myQuestionModal'); $.ajax({ type: "POST", url: "YOURURL", data:{ edited_question: editedQuestionObj, question: editedQuestionId }, success: function(){ modalObj.dialog('close'); modalObj.html(''); }, complete: function(){ //window.location.reload(true); } }); } }(jQuery)); 

Answer 2

您应该将函数定义移到document.ready回调之外($(function() { ... } ）：

 function update_question_ajax(id) { var test = $('.edit-question-' + id + ' input[name="translated"]'); var editedQuestionId = $('#question-id-'+id).val(); var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(); var modalObj = $('#myQuestionModal'); $.ajax({ type: "POST", url: "", data:{ edited_question: editedQuestionObj, question: editedQuestionId }, success: function(){ modalObj.dialog('close'); modalObj.html(''); }, complete: function(){ //window.location.reload(true); } }); return false; } 

你在$(function() {}放置的所有东西都是在DOM准备就绪时执行的，但是它的作用域是私有的。

另一方面，如果你想使用不引人注目的javascript，那么从你的标记中删除这个onclick属性：

然后使用文档就绪回调来不引人注意地订阅这些按钮的.click事件：

 $(function() { function update_question_ajax(id) { var test = $('.edit-question-' + id + ' input[name="translated"]'); var editedQuestionId = $('#question-id-'+id).val(); var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(); var modalObj = $('#myQuestionModal'); $.ajax({ type: "POST", url: "", data:{ edited_question: editedQuestionObj, question: editedQuestionId }, success: function(){ modalObj.dialog('close'); modalObj.html(''); }, complete: function(){ //window.location.reload(true); } }); return false; } $('.button').click(function() { var id = $(this).data('id'); return update_question_ajax(id); }); });