我有一个显示命令列表的索引,每一个调用一个函数(当我从db中获取数据时,用php命名),为简化起见,我将每个div包含的函数简化为警报。而且每分钟都会执行一个ajax函数,该函数搜索新订单并将其追加到顶部,并使用与最初加载的代码完全相同的代码。 jQuery在最初加载的元素中运行完美,但在动态生成的元素中根本不起作用。
这是内部有一个初始订单的索引,在newOrders首次运行之前。该订单的警报功能正常
<div id="content">
<div id="pedido_4126" class="pedido">
<h4>Pedido 4126</h4>
<button id="btn4126">Alert</button>
<script>
alert("Pedido 4126");
</script>
</div>
</div>
<script>
function newOrders() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "simplereq.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
console.log(response);
var element = document.querySelector('#content');
var content = element.innerHTML;
ultimoid = response.ultimoid;
element.innerHTML = response.contenido + content;
}
};
xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
}
setInterval(newOrders, 60000);
</script>
这是函数执行一次并在其顶部附加新命令及其相应脚本之后的索引,该脚本是通过AJAX调用动态生成和接收的:
<div id="content">
<div id="pedido_4255" class="pedido">
<h4>Pedido 4255</h4>
<button id="btn4255">Alert</button>
<script>
alert("Pedido 4255");
</script>
</div>
<div id="pedido_4126" class="pedido">
<h4>Pedido 4126</h4>
<button id="btn4126">Alert</button>
<script>
alert("Pedido 4126");
</script>
</div>
</div>
<script>
function newOrders() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "simplereq.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
console.log(response);
var element = document.querySelector('#content');
var content = element.innerHTML;
ultimoid = response.ultimoid;
element.innerHTML = response.contenido + content;
}
};
xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
}
setInterval(newOrders, 60000);
</script>
如您所见,html和脚本完全相同,但是由ajax调用带来的新订单上的html和脚本不起作用。
答案 0 :(得分:-1)
好吧,所以做更多的研究后,我找到了最适合我的情况的答案,如果有帮助,我会留在这里。
在我通过AJAX调用生成的内容中,我打印这样的脚本,并显然使用CSS隐藏它:
<div class="javascript">
$("body").on("click","#btn4255",function(){
alert("Pedido 4255");
});
</div>
然后每次返回AJAX调用时我都要执行此功能
$('.javascript').each(function() {
eval($(this).text());
});
我只评估自己生成的字符串,因此在这种情况下,我认为使用eval()并非不安全。