Javascript 单击输入类型=提交时不触发的事件

很明显，我在做一些愚蠢的事情，我不太明白出了什么问题。每当我点击“发送”按钮时，点击事件都无法触发

function CreateNewMessage()
{
    var receiver = $("#receiver").value;
    var msg_body = ("#msg_body").value;
    $("#submit").click(function(event) {
        alert("it works!");
        $.post("new/", {"receiver" : receiver, "msg_body" : msg_body});
    });
}

(function() {
    $(document).ready(function() {
        CreateNewMessage();
    });
})();

还有HTML按钮

<input id="submit" value="Send" type="submit">

它仍然没有正确发送请求，并且控制台没有记录错误。在上面的代码中，我尝试使用submit事件而不是click事件，但得到了相同的结果

编辑2 因此，代码在JSFIDLE上工作，但在我的浏览器中不工作。我真的很困惑

编辑3： 也许这和它有关。。。请注意，初次加载页面时，“提交”按钮不存在。它是在特定javascript事件触发时生成的。

如果您缺少

#msg_body

的

$（）

函数，应该是这样的：

var receiver = $("#receiver")[0].value;
var msg_body = $("#msg_body")[0].value;

另外，您不需要将

ready

包装到函数中，您可以在脚本中直接调用它；您还可以直接将CreateNewMessage函数设置为处理程序，如下所示：

$(document).ready( CreateNewMessage );

您缺少

#msg_body

的

$（）

函数，应该是这样的：

var receiver = $("#receiver")[0].value;
var msg_body = $("#msg_body")[0].value;

另外，您不需要将

ready

包装到函数中，您可以在脚本中直接调用它；您还可以直接将CreateNewMessage函数设置为处理程序，如下所示：

$(document).ready( CreateNewMessage );

您错过了$before（“#msg_body”），因此您的脚本将在那里崩溃

function CreateNewMessage()
{
    var receiver = $("#receiver").value;
    var msg_body = $("#msg_body").value;
    $("#submit").click(function(event) {
        alert("it works!");
        $.post("new/", {"receiver" : receiver, "msg_body" : msg_body});
    });
}

(function() {
    $(document).ready(function() {
        CreateNewMessage();
    });
})();

您错过了$before（“#msg_body”），因此您的脚本将在那里崩溃

function CreateNewMessage()
{
    var receiver = $("#receiver").value;
    var msg_body = $("#msg_body").value;
    $("#submit").click(function(event) {
        alert("it works!");
        $.post("new/", {"receiver" : receiver, "msg_body" : msg_body});
    });
}

(function() {
    $(document).ready(function() {
        CreateNewMessage();
    });
})();

试试这个：

function CreateNewMessage()
{
    var receiver = $("#receiver").value;
    var msg_body = $("#msg_body").value;

    alert("it works!");
    $.post("new/", {"receiver" : receiver, "msg_body" : msg_body});
}

$(function(){
  $("#submit").click(function() {
    CreateNewMessage();
  });
});

试试这个：

function CreateNewMessage()
{
    var receiver = $("#receiver").value;
    var msg_body = $("#msg_body").value;

    alert("it works!");
    $.post("new/", {"receiver" : receiver, "msg_body" : msg_body});
}

$(function(){
  $("#submit").click(function() {
    CreateNewMessage();
  });
});

---

jQuery的值为.val（）。还有，为什么不收听提交活动？如果您不想让帖子通过，只需让它返回false即可。

jQuery的值为.val（）。还有，为什么不收听提交活动？如果您不想让帖子通过，只需让它返回false即可。

检查浏览器中的控制台，它将为您提供出错的线索。了解如何调试代码。在处理单个项目时，将索引器

[0]

添加到

$（）

调用中。检查浏览器中的控制台，它将为您提供出错的线索。了解如何调试代码。在处理单个项目时，将索引器

[0]

添加到

$（）

调用中。我不是OP。它应该是

.val（）

或

$（“#msg_body”）[0]。value

我不是OP。它应该是

.val（）

或

$（“#msg_body”）[0].value

在提交帖子之前，我需要编辑请求头以包含CSRD令牌。我的理解是，我只能通过AJAX请求来实现这一点，然后从submit函数触发AJAX请求。只要提交函数返回false，浏览器就不会尝试发布表单。让我问一个愚蠢的问题。我对javascript很陌生。。。提交函数是否附加到onclick属性？您需要将submit（）函数附加到表单，而不是“提交”按钮。在提交帖子之前，我需要编辑请求标题以包含CSRD令牌。我的理解是，我只能通过AJAX请求来实现这一点，然后从submit函数触发AJAX请求。只要提交函数返回false，浏览器就不会尝试发布表单。让我问一个愚蠢的问题。我对javascript很陌生。。。提交函数是否附加到onclick属性？您需要将submit（）函数附加到表单，而不是“提交”按钮。