修改

Question

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

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

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

以下是javascript wysiwyg编辑器中的一小段代码。我仍然在我的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);

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

4 个答案:

修改