addEventListener第一次工作

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

第一次点击注册按钮时，一切都很完美，但如果我想再次提交表单以防出现任何验证错误，脚本将无法工作，并且整个页面都会重新加载。

<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>

来源

2014-07-25 ahmedsaber111

我发现jQuery的！ – adeneo

@adeneo你的意思是我必须使用JQuery来代替？ – ahmedsaber111

@ ahmedsaber111不，你根本不需要使用jquery，但是如果你这样做的话。与你使用它的方式保持一致，尽量避免混合香草js听众和随意的jquery电话在这里和那里。另外，adeneo的评论意味着你有你的代码中使用jQuery，但没有标记为问题。 **可以使用吗？**是问题。 –

你是否用ajax响应中的新选项替换了#register按钮？如果是这样，那么新按钮将不会附加事件。

如果是这种情况，那么也许尝试在阿贾克斯readyState的回调再次附上事件

来源

2014-07-25 10:47:58 Jackson

aaaaaaand，在哪里做代码？ –

当提交按钮被按下时，包括脚本本身在内的整个表单被替换，但是同样的按钮再次被重新加载，我是否需要再次附加事件 – ahmedsaber111

页面没有监听第二个点击事件的相同问题我点击按钮 – ahmedsaber111

我认为这个问题是在这里：

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

您正在通过新的形式取代电子邮件形式jQueryhtml方法和处理程序仍旧只适用于旧（替换）表单。尝试jQuery事件委派：

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

来源

2014-07-25 10:48:40 Pinal

'$（“。registerForm”）。委托（“＃register”，“click”，handleRegisterationProcess）;'我试过这段代码，它对我很好，但后来我遇到了另一个问题，我无法保存表单中的值第一次提交的值 – ahmedsaber111

要做到这一点最简单的方法，在您要更换整个表格的情况下，是这样的：

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

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

来源

2014-07-25 10:53:11

我现在试过了，但同样的问题，页面没有听第二次单击事件我点击了按钮 – ahmedsaber111

什么是你选择的选择器，重新使用？或者你正在更换什么？你有没有尝试过使用表单的'submit'事件？ –

'$（'。jqimessage'）。html（request.responseText）。show（）;'jqimessage是包装表单和脚本的容器，我也没有尝试提交事件，它可能有意义 – ahmedsaber111

感谢所有的答案，他们都是对我有帮助:)，这个问题是由我的错误提出，在下面的代码行

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

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

我代替我的选择像下面

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

来源

2014-07-26 14:13:22 ahmedsaber111

addEventListener第一次工作

回答

相关问题