1

我正在尝试创建一个使用 ajax 的消息传递系统，在提交消息时不必重新加载。我有一个 .js 文件，它使用 onclick 打开表单以插入您的消息，然后使用不同的函数来提交表单。这不起作用是因为我做错了什么还是因为您不能在同一个文件中使用 JQuery 和 Javascript。

这是我的代码：

//I have a button that calls this function with an onclick in my HTML file
function createMessage() {
var form = document.createElement("form");
form.name = "form_input";
form.method = "POST";
form.action = "messages.php";
//I also have a container div in my HTML
container.appendChild(form);

var textarea = document.createElement("textarea");
textarea.name = "message_input";
textarea.action = "messages.php"
textarea.method = "POST";
textarea.cols = 84; 
textarea.rows = 16; 
textarea.id = "message_input";
form.appendChild(textarea); 

var div = document.createElement("div");
div.id = "second_picture";
container.appendChild(div);

var submit = document.createElement("button");
submit.innerHTML = 'Send';
submit.id = 'send_message';
submit.name = 'submit';
form.appendChild(submit); 
submit.onclick = submitMessage;
};

function submitMessage() {
$(function() {  
    $("#send_message").click(function() {    
        var message = $("input#message_input").val();    
        var dataString = 'message_input='+ message; 

        $.ajax({  
            type: "POST",  
            url: "messages.php",  
            data: dataString,  
            success: function() {  
                alert('Ok.');  
            }  
        });  
        return false;  
    });  
});  
};
4

3 回答 3

2

长话短说：你做错了什么。jQuery是一个库，没有Javascript就不能使用，因此两者可以在同一个文件中使用。jQueryJavascript

长话短说：您的错误可能是您在加载jQuery之前尝试使用函数。jQuery或者，您可能尚未初始化变量。例如，我看不到您在哪里初始化container变量。我知道你有一个容器 div，但那是 html。我们现在谈论的是 JS 对象。

于 2013-09-15T01:31:25.653 回答
2

您的问题不是您的 jQuery 和 JavaScript，而是您的代码在同一页面上。

事件处理问题

如果您使用onclick它，您可以只将 1 个处理程序应用于事件，因此使用window.addEventListenerjquery 的事件处理程序被认为是最佳实践，它允许您将多个侦听器附加到同一个对象。

事件传播问题

您return false在单击事件处理程序的末尾告诉浏览器仅执行此操作，而不是让事件冒泡到可能正在侦听该元素上的事件的任何其他事物。在这种情况下，如果您在有人按下提交按钮（或其他任何东西）时尝试做两件不同的事情，它可能无法正常工作，因为您添加了return false. 例如，在这种情况下，它可能会阻止表单提交。

不正确的 DOMReady 包装

function submitMessage() {
    $(function() {
        /* ... */
    });
}

你不需要用$(function() {. 通常您将整个文件包装在其中，您仍然可以在此处执行此操作（如果需要）

于 2013-09-15T01:21:48.923 回答
0

您可以在同一个文件中使用它们。jQuery 是 Javascript我不会，只是因为它可能有点令人困惑。这是一个很好的链接。

于 2013-09-15T01:25:53.880 回答