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第一次工作

回答

相關問題