我正在执行一个 AJAX 请求，PHP 脚本接收并发回响应。在发出请求之前，我的 JavaScript 代码运行得很好，但是在从服务器收到响应之后，所有 JavaScript 代码都变得毫无用处。下面的代码只是为了说明所发生的情况，并且它做得非常完美:
HTML:
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<form method='post' action=''>
<textarea cols='30' rows='5' name='test'></textarea>
<input type='submit' value='ok' />
</form>
<div id='ajax-response'></div>
JavaScript:
$('textarea').click(function() {
alert('ouch!');
});
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
document.getElementById('ajax-response').innerHTML = xhr.responseText;
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
}
$('form').submit(function(event) {
if(typeof(FormData) != 'undefined') {
var oform = this;
event.preventDefault();
xhr.open('post', '', false);
xhr.send(new FormData(oform));
}
});
处理 AJAX 请求的 PHP 脚本:
if (isset($_POST['test'])) {
echo "<form method='post' action=''>
<textarea cols='30' rows='5' name='test2'></textarea>
<input type='submit' value='ok' />
</form>";
}
收到响应并将新表单添加到页面。但是在提交表单之前，当您单击文本区域时，会引发警报。当请求从服务器返回时，这不再起作用(警报只是一个示例；实际上没有 JavaScript 代码被执行)。我一整天都在研究这个问题，一个解决方案会让我开心!
编辑
Doug 下面的答案解决了我的问题，但我认为值得一提的是，由于 gengkev 在这个问题下面的评论，我还发现使用 innerHTML 不仅删除了它所在元素的内容在用新内容替换这些元素之前，使用但其他构造，例如子元素的数据和事件处理程序。因此，当我将具有 innerHTML 属性的行替换为:
$('#ajax-response')append(xhr.responseText);
感谢大家的帮助，伙计们!
最佳答案
好的，我已经创建了以下 JSFiddle: http://jsfiddle.net/zLAht/24/
这就是你想要的，对吧？
您的代码最初的 Ajax 请求方式并未替换提交上的区域，而是基于您的问题听起来像是问题。
HTML
<body>
<div id='ajax-response'>
<form method='post' action=''>
<textarea cols='30' rows='5' name='test'></textarea>
<input id='sub' type='button' value='ok' />
</form>
</div>
</body>
JavaScript:
$('textarea').click(function() {alert('ouch!');});
$('#sub').click(function(event) {
$.ajax({
cache:false,
type: 'POST',
url: '/echo/html/',
data: {
html:"<form method='post' action=''><textarea cols='30' rows='5' name='test2'></textarea><input type='submit' value='ok' /></form>"
},
success: function(data) {
$('#ajax-response').html(data);
$('textarea').click(function() {alert('ouch!');});
},
error:function(error){
alert('there was an error');
},
dataType: 'html'
});
});
关于页面收到 AJAX 响应后 JavaScript 不再执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27751655/