Я пытаюсь создать клиент всплывающего чата, похожий на тот, который используется в Facebook, используя JQuery. В попытке максимизировать эффективность каждое окно чата создается с помощью JQuery и добавляется в контейнер div при каждом нажатии ссылки и уничтожается при каждом нажатии значка «x». Все это прекрасно работает.
Моя проблема возникает из-за попытки использовать event.preventDefault (), чтобы помешать форме перезагружать страницу.
demoPage. html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Demo</title>
</head>
<body>
<a href="javascript:void(0);" id="startButton"><p>Click</p></a>
<div id="m"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#formID form').submit(function(event){
event.preventDefault(); // prevent page reloading
//do chat stuff
return false;
});
});
$(document).on('click', '#startButton', function(e) {
var $form = $("<form/>", { id: "formID" });
$input = $("<input/>", { class: "c4" });
$button = $("<button/>", { class: "btn", type: "button", text: "button" });
$form.append($input, $button).appendTo("#m");
});
</script>
</body>
</html>
Когда я добавляю форму с использованием JQuery, как указано выше, страница перезагружается. Однако, если форма закодирована в HTML, например:
demoPage2. html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Demo</title>
</head>
<body>
<a href="javascript:void(0);" id="startButton"><p>Click</p></a>
<div id="m">
<form id="formID"></form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('#formID').submit(function(event){
event.preventDefault(); // prevent page reloading
//do chat stuff
return false;
});
});
$(document).on('click', '#startButton', function(e) {
var $input = $("<input/>", { class: "c4" });
$button = $("<button/>", { class: "btn", type: "button", text: "button" });
$input.appendTo("#formID");
$button.appendTo("#formID");
});
</script>
</body>
</html>
, форма не перезагружает страницу при нажатии клавиши ввода , что и является желаемым результатом. Это проблема, поскольку это означает, что мне придется добавлять пустую форму для каждого возможного окна чата.
Я работаю над этой проблемой уже 4 дня. Я попытался поместить preventDefault () в атрибут формы onsubmit, а затем вызвать myFormSubmit (), например:
var $form = $("<form/>", { id: "formID", onsubmit: "event.preventDefault(); myFormSubmit();" });
и поместить свои действия в функцию myFormSubmit (), но это тоже не работай. Поиск в Google моей проблемы также не дал никакой полезной информации.
Любые объяснения или предложения были бы чрезвычайно признательны.