Ajax調用後Javascript事件不會啓動

我有一個表單（輸入，textarea和提交按鈕），我也有一個項目列表。我寫了下面的腳本：Ajax調用後Javascript事件不會啓動

當我點擊列表項的文本區域將顯示列表項文字內容上提交，Ajax調用將發佈形式
而無需刷新頁面

代碼在第一時間正常工作，但當我再次點擊列表項目時，我將無法更新textarea（上面的點＃1將不再工作）。

var ul = document.getElementById('messages-list'); 

var listItems = Array.prototype.slice.call(ul.querySelectorAll("li")); 

listItems.forEach(function (item) { 
    item.addEventListener("click", function (event) { 
    document.getElementById("message").textContent = this.textContent; 
    }); 
}); 

$(function() { 

    $('form').on('submit', function (e) { 

    e.preventDefault(); 

    $.ajax({ 
     type: 'post', 
     url: 'send_sms.php', 
     data: $('form').serialize(), 
     success: function() { 
     alert('msg sent'); 
     $('textarea').val(""); 
     $('#phoneNumber1').val(""); 
     } 
    }); 

    }); 

});

你能幫我解決這個問題嗎？提前致謝。

來源

2017-06-13 Ray

您是否檢查了瀏覽器控制檯的錯誤？ – NewToJS

我在表單提交後得到這個：[違規]'DOMContentLoaded'處理程序花費了164ms jquery.min.js：4 [違規]'load'處理程序耗時902ms – Ray

您應該將所有代碼放在DOM ready handler中， $（function（）{...}）'。這就是說，如果你的代碼第一次工作，那可能不是問題 – Phil

嘗試更新的forEach使用.val()更新textarea時：

listItems.forEach(function (item) { 
    item.addEventListener("click", function (event) { 
    $('#message').val(this.textContent); 
    }); 
});

正如其他人指出，.val()是獲取/設置內容的首選方法 - 混合這與textContent似乎給你造成的問題」重新體驗。

來源

2017-06-13 00:32:44 Conan

我發現這個問題在Microsoft Edge中不存在。只在Firefox和Chrome！ @Conan – Ray

@Ray嘗試$（this）.text（）而不是this.textContent。看起來有用嗎？ –

@SalehMosleh同樣的東西只適用於MS Edge – Ray

Ajax調用後Javascript事件不會啓動

回答

相關問題