这是调用javascript函数的正确方法吗？

Question

这是用 jquery 调用我的 javascript 函数的正确方法吗？我花了过去 5 个小时试图弄清楚为什么这不起作用。

<form class="rpt" id="rpt" action="">

---

$(function() {
  $("#rpt").submit(doSave);
});
</script>

---

这是 javascript 所见即所得编辑器中的小 sn-p 代码。我仍然在我的 html 中使用完全相同的表单标签。

        // Save
        case "Save":
            WYSIWYG.updateTextArea(n);
            var form = WYSIWYG_Core.findParentNode("FORM", this.getEditor(n));
            if(form == null) {
                alert("Can not submit the content, because no form element found.");
                return;
            }
            form.submit();
        break;

Answer 1

提交函数有两种变体。如果您致电$('#rpt').submit();，您将触发表单的“提交”事件。如果您调用 $('#rpt').submit(myFunctionName); 您正在将 myFunctionName 绑定到表单的“提交”事件。这个不会在页面加载时被触发，只有在你尝试提交表单时才会触发。因此，这段代码：

<form id="rpt" method="GET" action="http://www.google.com/search">
Search: <input type="text" name="q"> <input type="submit" value="Go">
</form>

还有这个 Javascript：

function myFunctionName() {
   alert('The form is being submitted!');
   return false; // cancel the event (ie, the form will not be sent)
}
$(function() {
    $('#rpt').submit(myFunctionName);
});

仅在提交表单时调用myFunctionName 函数（通过手动按下“Go”按钮或在文本字段获得焦点时按下 Enter）。 Here is a sample of it at work。如果你想在页面加载时运行一个特定的函数，你所要做的就是传递一些东西给$(document).ready();函数，或者简称$()：

function onLoadDoThis() {
    alert('Page is loaded!');
}
$(document).ready(onLoadDoThis); // $(onLoadDoThis); is the same thing

还有here is an example of this。希望这清除了一些东西...

编辑

好的，所以我准备了一个工作示例来说明您正在尝试做的事情。起初我很生气你不能让它工作，但实际上有很多限制你必须解决，因为这个编辑器有多糟糕。无论如何，进入解释：

第一个问题是库将 $ 的使用覆盖到它自己的小函数中。所以 jQuery 令人敬畏是不可能的常规方式。谢天谢地，jQuery is awesome，您可以通过以下方式解决这个问题：

$j = jQuery.noConflict();

现在你必须做$j(...);，而不是$(...);。如果您没有意识到这一点，很可能您正在尝试编写 jQuery 代码，但没有发生任何事情。

您可能遇到的下一个障碍是对于大多数 事件，当您执行$(selector).myevent(aFunction); 之类的操作时，假定执行$(selector).myevent(); 将触发所述事件。但是，this is not true of the submit event。除非表单操作由用户触发，否则当通过代码提交表单时，不会调用绑定到表单提交的代码。因此，即使编辑器源代码中form.submit(); 的行只是触发表单的本机提交事件，即使您使用 Javascript 将事件绑定到此事件，在这种情况下也不会调用它，因为用户没有触发提交事件，代码触发了。

由于这个限制，在不编辑编辑器源代码的情况下实现您想要的变得越来越棘手。您会看到，编辑器将其“创建所有仪表板废话”的内容附加到窗口的加载事件中。该事件在 jQuery 的 DOM 就绪事件之后触发，因为 jQuery 就绪的全部意义在于尽快触发，而不是一秒钟后触发，而 window.load 度过了美好的时光。所以我们要做的就是抛弃 jQuery 绑定代码 (grimace) 并使用编辑器自己的绑定代码在它自己的“创建仪表板”功能之后直接附加一个事件。此时，仪表板已经创建，因此我们可以访问“保存”按钮并使其执行我们想要的操作 - 只有在删除了您在源代码中找到的调用“保存”函数的原始事件之后。

最终，代码看起来像这样：

$j = jQuery.noConflict(); // give up ownership of $ to WYSIWYG

WYSIWYG.attach('textarea1', full); // first attach the event to create this widget

WYSIWYG_Core.addEvent(window, "load", function() {
    // and now override the Save button
    // the removeAttr('onclick') is crucial to stop it
    // from doing what it normally does (Which is submit the form)
    $j('#Save').removeAttr('onclick').click(function() {
        var form = $j('#myform');
        var data = form.serialize();
        var type = form.attr('method');
        var url = form.attr('action');
        $j.ajax({
            url: url,
            type: type,
            data: data,
            dataType: 'json',
            success: function(d) {
                if(d.success == 1) {
                    $j('#notice').html('Everything went alright! High fives.');
                } else {
                    $j('#notice').html('Something went wrong. Eep.');
                }
            }
        });        
    });
});

虽然my_handler.php 是一个非常简单的脚本，它只返回一个 json 字符串：

<?php
// process your stuff here, set success as 1 or 0
$success = 1;
print json_encode(array('success' => $success));
?>

And here is an example of it in action.

就我个人而言，我真的不喜欢这个特别的编辑器，我建议你看看别的。

无论如何，我希望这会有所帮助。

Answer 2

由于“rpt”是类名和表单名，您可以使用“.”。或“#”，假设“doSave”是用作回调的函数的名称，它将起作用。所以，它可以这样调用：

$(".rpt").submit(doSave);
function doSave(){
  //do something
}

或者你可以让函数本身可以是参数：

$(".rpt").submit(function(){
  //do something here
});

编辑：如果您不希望表单回发。添加“return false;”。

$("#rpt").submit(doSave);
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

Answer 3

比这更简单：

$("#rpt").submit(doSave);

如果这不起作用，那是因为您使用的是 JQuery 集，即使您对提交表单元素感兴趣。如果是这样，请尝试让 JQuery 相信它只是一个元素：

$("#rpt").eq(0).submit(doSave);

Answer 4

doSave 函数可能必须在源代码中定义得早于将其绑定到提交事件的代码...

此代码不起作用

// doSave is undefined at this point
$("#rpt").submit(doSave);

// Now we've defined doSave, but it's too late.
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

我相信这段代码应该可以工作：

$("#rpt").submit( function (){
    alert("submitted");
    return false;    
});

或者如果你必须单独定义 doSave，试试这个：

// First define doSave
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

// Then bind it
$("#rpt").submit(doSave);