Question

我使用$ .post加载注册表单，下面是加载的代码，之后该页面使用XMLhtppRequest（）发送表单数据并在同一页面上返回响应，

每当第一次单击注册按钮时，一切都工作正常，但如果我想再次提交表单以防有任何验证错误，则脚本将无法正常工作并重新加载整个页面。

<form>
<input type="text" name="email" placeholder="Email" />
<button type="submit" id="register">Register</button>
</form>
<script>
var handleRegisterationProcess = function(event) {
    event.preventDefault();
    event.stopPropagation();
    //console.log($("input.email").val());
    var data = new FormData(document.forms.namedItem("register"));
    var request = new XMLHttpRequest();
    request.open('POST', 'url here');
    request.setRequestHeader('Cache-Control', 'no-cache');
    request.send(data);
    request.onreadystatechange = function()
{
    if (request.readyState === 4) {
        $('selector here').html(request.responseText).show();
    }
};    
};

var register = document.getElementById('register');
register.addEventListener('click', handleRegisterationProcess);    
</script>

Answer 1

您是否正在使用ajax响应中的新按钮替换#register按钮？如果是这样，那么新按钮将不会附加事件。

如果是这种情况，那么可能会尝试在ajax readystate回调中再次附加事件

Answer 2

我认为问题在于：

$('selector here').html(request.responseText).show();

您正在通过jQuery html方法用新表单替换您的电子邮件表单，并且处理程序仅适用于旧（已替换）表单。尝试jQuery事件委派：

$(document).on('click', '#register', handleRegisterationProcess);

Answer 3

在您更换整个表单的情况下，最简单的方法是：

if (request.readyState === 4) {
    $('selector here').html(request.responseText).show();
    var register = document.getElementById('register');
    register.addEventListener('click', handleRegisterationProcess);
}

是的......重新连接处理程序。

Answer 4

感谢所有答案，所有答案对我都有帮助:)，问题是由我的错误引起的，在下面的代码行中

$('.jqimessage').html(request.responseText).show();

我在页面中有多个具有相同类名的选择器，因此每次提交页面时，我的表单和脚本总是在页面中放置四次，这在JS脚本中发生了冲突。

我替换了我的选择器，如下所示

$('#jqistate_state2 .jqimessage').html(request.responseText).show();

addEventListener仅适用于第一次

4 个答案: