我正在为客户网站构建一个测验,我从 Ajax 调用中获取问题,然后用新问题替换 HTML 内容,问题是我的 Ajax 调用只能运行一次,如果我调用就会失败再试一次。当我用 html()
一次性替换所有内容时,它会失败,但是如果我将其分解为多个部分并为每个部分替换 do html()
,它就不起作用问题,但是当我一次完成所有操作时,如果第一次失败,如果有人可以看一下我的代码并告诉我为什么会发生这种情况,我将非常感激,提前致谢!
HTML
<section class="widget twelve quiz">
<div class="content">
<div class="widget six sign">
<img src="http://www.mysite.com/images/questions/question-1.jpg" alt="">
</div>
<div class="widget six question">
<header>
<button class="align-right button" data-object='{"qui_id":"0","action":"1","que_id":"1"}'>Skip</button>
</header>
<h2>Q: Lorem Ipsum?</h2>
</div>
<div class="widget twelve answers">
<ul>
<li><button data-object='{"ans_id":"1"}'>A: Lorem 1.</button></li>
<li><button data-object='{"ans_id":"2"}'>B: Lorem 2.</button></li>
<li><button data-object='{"ans_id":"3"}'>C: Lorem 3</button></li>
<li><button data-object='{"ans_id":"4"}'>D: Lorem 4.</button></li>
</ul>
</div>
<div class="widget six navigation">
<button class="align-right button" data-object='{"qui_id":"0","action":"0","que_id":"1"}'>Next</button>
</div>
</div>
</section>
Ajax 调用只能运行一次
$('.question,.navigation').on('click', '.button', function() {
$.ajax({
type: 'POST',
url: 'http://www.mysite.com/handler-question.php',
dataType: 'json',
data: $(this).data('object'),
success: function(data) {
$('.quiz').html('<div class="content">'
+ '<div class="widget six sign">'
+ '<img src="http://www.mysite.com/images/questions/'+data[0].que_file+'" alt="">'
+ '</div>'
+ '<div class="widget six question">'
+ '<header>'
+ '<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"1","que_id":"'+data[0].que_id+'"}'+'>Skip</button>'
+ '</header>'
+ '<h2>Q: '+data[0].que_question+'</h2>'
+ '</div>'
+ '<div class="widget twelve answers">'
+ '<ul>'
+ '<li><button data-object='+'{"ans_id":"'+data[1].ans_id+'"}'+'>A: '+data[1].ans_answer+'</button></li>'
+ '<li><button data-object='+'{"ans_id":"'+data[2].ans_id+'"}'+'>B: '+data[2].ans_answer+'</button></li>'
+ '<li><button data-object='+'{"ans_id":"'+data[3].ans_id+'"}'+'>C: '+data[3].ans_answer+'</button></li>'
+ '<li><button data-object='+'{"ans_id":"'+data[4].ans_id+'"}'+'>D: '+data[4].ans_answer+'</button></li>'
+ '</ul>'
+ '</div>'
+ '<div class="widget six navigation">'
+ '<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"0","que_id":"'+data[0].que_id+'"}'+'>Next</button>'
+ '</div>'
+ '</div>');
}
});
});
Ajax 调用没有问题
$('.question,.navigation').on('click', '.button', function() {
$.ajax({
type: 'POST',
url: 'http://www.mysite.com/handler-question.php',
dataType: 'json',
data: $(this).data('object'),
success: function(data) {
$('.sign').html('<img src="http://www.mysite.com/images/questions/'+data[0].que_file+'" alt="">');
$('.question').html('<header>'
+ '<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"1","que_id":"'+data[0].que_id+'"}'+'>Skip</button>'
+ '</header>'
+ '<h2>Q: '+data[0].que_question+'</h2>');
$('.answers').html('<ul>'
+ '<li><button data-object='+'{"ans_id":"'+data[1].ans_id+'"}'+'>A: '+data[1].ans_answer+'</button></li>'
+ '<li><button data-object='+'{"ans_id":"'+data[2].ans_id+'"}'+'>B: '+data[2].ans_answer+'</button></li>'
+ '<li><button data-object='+'{"ans_id":"'+data[3].ans_id+'"}'+'>C: '+data[3].ans_answer+'</button></li>'
+ '<li><button data-object='+'{"ans_id":"'+data[4].ans_id+'"}'+'>D: '+data[4].ans_answer+'</button></li>'
+ '</ul>');
$('.navigation').html('<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"0","que_id":"'+data[0].que_id+'"}'+'>Next</button>');
}
});
});
最佳答案
如果用 html()
替换内容,则附加到元素的所有事件监听器都会丢失,即使您再次重新创建相同的标记也是如此。事实上,监听器仍在内存中,并且会扰乱浏览器的 RAM 消耗,但这是另一回事了。
你有两种可能性:
替换 html 内容后重新创建事件监听器。因此,您应该将整个点击监听器回调分配给一个变量。但这不是最可维护和最优雅的解决方案。
如果可能,不要破坏仍将使用的元素。相反,只需修改已更改的元素(如您的第二个工作示例中所示)。这样您甚至可以使用一些突出显示动画来通知用户更新。
另外,我赞同 net.uk.sweet 在评论部分所说的:生成 html 应该与 ajax javascript 处理分开。只需更新必要的位即可。
关于javascript - jQuery Ajax 单击调用仅有效一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17332450/