我正在尝试创建一个使用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;
});
});
};
答案 0 :(得分:2)
您的问题不是您的jQuery和JavaScript,而是在同一页面上它是您的代码。
事件处理问题
如果使用onclick
,它只允许对事件应用1个处理程序,因此最好使用window.addEventListener
或jquery的事件处理程序,这样可以将多个侦听器附加到同一个对象
事件传播问题
您在点击事件处理程序结束时return false
,您告诉浏览器只执行此操作,并且不要让事件冒泡到可能正在侦听该元素上的事件的任何其他事物。在这种情况下,如果您在某人按下提交按钮(或其他任何内容)时尝试执行2 不同的操作,则可能无法正常工作,因为您已添加return false
。在这种情况下,它可能会阻止表单提交,例如。
DOMReady Wrapping不正确
function submitMessage() {
$(function() {
/* ... */
});
}
您不需要使用$(function() {
包含此函数的内部。通常你将整个文件包装在那里,你仍然可以在这里做(如果需要的话)
答案 1 :(得分:2)
长话短说:你做错了什么。 jQuery
是Javascript
库,如果没有jQuery
,则无法使用Javascript
,因此这两个文件可以在同一个文件中使用。
短篇小说:您的错误可能是您在加载jQuery
之前尝试使用jQuery
函数。或者,您可能尚未初始化变量。例如,我没有看到您初始化container
变量的位置。我知道你有一个容器div,但那是html。我们现在正在讨论JS对象。
答案 2 :(得分:0)
您可以在同一个文件中使用它们。 jQuery是Javascript 但是,我不会因为它有点令人困惑。 Here is a good link.