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

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绑定到表单的“ submit”事件。 当页面加载时， 不会触发此操作，只有在您尝试提交表单时才会触发。 因此，此代码：

<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函数（通过手动按“转到”按钮或在文本字段为焦点时按Enter）。 这是工作示例 。 如果要在页面加载时运行特定功能，则要做的就是将某些内容传递给$(document).ready(); 函数，或$()为$() ：

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

这是一个例子 。 希望这可以清除一些东西...

编辑

好的，我整理了一个您要尝试做的工作示例。 起初，我很生气，您无法使用它，但是由于该编辑器的糟糕程度，实际上您必须解决很多限制。 无论如何，要解释一下：

第一个问题是该库将$的使用覆盖到其自己的小函数中。 因此，jQuery绝妙的常规方法是不可能的。 幸运的是， jQuery非常棒 ，您可以通过执行以下操作来解决此问题：

$j = jQuery.noConflict();

现在不用做$(...); 你必须做$j(...); 。 如果您不知道这一点，则很可能是您在尝试编写jQuery代码，但没有任何反应。

您可能遇到的下一个障碍是，对于大多数事件，当您执行类似$(selector).myevent(aFunction); 假设正在做$(selector).myevent(); 将触发上述事件。 但是， 对于commit事件并非如此 。 除非表单操作是由用户触发的，否则当您通过代码提交表单时，将不会调用您绑定到表单提交的代码。 因此，即使在编辑器的源代码中执行form.submit();也是form.submit(); 只是触发了表单的本机提交事件，即使您使用Java脚本将事件绑定到此事件，在这种情况下也不会调用该事件，因为用户没有触发提交事件，而代码却触发了。

由于此限制，在不编辑编辑器源代码的情况下实现所需的功能变得越来越棘手。 您会看到，编辑器将其“创建所有仪表板废话”内容附加到窗口的load事件。 此事件在jQuery的DOM ready事件之后触发，因为jQuery的ready焦点是尽快触发，而不是一秒钟后触发，而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));
?>

这是一个实际的例子 。

就个人而言，我真的不喜欢这个特定的编辑器，建议您检查其他内容。

无论哪种方式，我都希望能有所帮助。

Answer 2

由于“ rpt”是类的名称和表单的名称，因此可以使用“”。 或“＃”，并且假定“ doSave”是用作回调的函数的名称，它将起作用。 因此，可以这样称呼它：

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

或者您可以让函数本身成为参数：

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

编辑：如果您不希望表单回发。 添加一个“返回false；”。

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

Answer 3

比这更简单：

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

如果这不起作用，那是因为即使您有兴趣提交form元素，您也可以使用JQuery集。 如果是这样，请尝试说服JQuery它只是一个元素：

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

Answer 4

有可能必须在源代码中定义doSave函数，而不是将其绑定到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);