[英]jQuery Ajax call on click only works once
我正在為客戶網站構建測驗,並且從Ajax呼叫中獲取問題,然后用新問題替換HTML內容,問題是我的Ajax呼叫僅工作一次,如果再次嘗試將失敗。 當我一次用html()
替換所有內容時,它會失敗,但是如果我將其分解成幾個部分並為每個部分替換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 Call沒問題
$('.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處理分開。 只需更新必要的位。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.