Javascript 单击jqueryajax调用只工作一次

我正在为一个客户端网站构建一个测试，我从一个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>

跳过
问：Lorem Ipsum？

A:洛雷姆1号
B:洛雷姆2号
C:Lorem3
D:Lorem4

下一个

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>');

        }
    }); 
}); 

$（'.question，.navigation'）。在（'单击'，'.button'，函数（）上{
$.ajax({
键入：“POST”，
网址：'http://www.mysite.com/handler-question.php',
数据类型：“json”，
数据：$（this）.data（'object'），
成功：功能（数据）{
$（'.quick'）.html（''
+ ''
+ ''
+ ''
+ ''
+ ''
+“跳过”
+ ''
+“Q:”+数据[0]。问题+”
+ ''
+ ''
+“
”
+“
A:”+数据[1]。答案+”
”
+“
B:”+数据[2]。答案+”
”
+“
C:”+数据[3]。答案+”
”
+“
D:”+数据[4]。答案+”
'
+“
”
+ ''  
+ ''
+“下一个”
+ ''
+ '');
}
}); 
}); 

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>');

        }
    }); 
}); 

$（'.question，.navigation'）。在（'单击'，'.button'，函数（）上{
$.ajax({
键入：“POST”，
网址：'http://www.mysite.com/handler-question.php',
数据类型：“json”，
数据：$（this）.data（'object'），
成功：功能（数据）{
$（'.sign'）.html（''）；
$（'.question'）.html（''
+“跳过”
+ ''
+“Q:”+数据[0]。问题+”；
$（'.answers'）.html（'
'
+“
A:”+数据[1]。答案+”
”
+“
B:”+数据[2]。答案+”
”
+“
C:”+数据[3]。答案+”
”
+“
D:”+数据[4]。答案+”
'
+“
”）；
$（'.navigation'）.html（'Next'）；
}
}); 
}); 

如果将内容替换为

html（）

则附加到元素的所有事件侦听器都将丢失，即使重新创建相同的标记也是如此。事实上，监听器仍在内存中，并且会使浏览器的RAM消耗变得杂乱无章，但情况不同

你有两种可能：

替换html内容后，重新创建事件侦听器。因此，您应该将整个click listener回调分配给一个变量。但这并不是最容易维护和最优雅的解决方案

如果可能，不要破坏仍将使用的元件。相反，只需修改已更改的元素（如第二个示例中所示）。这样，您甚至可以使用一些高亮显示动画来通知用户更新

---

另外，我支持net.uk.sweet在评论部分所说的：生成html应该与ajax javascript处理分开。只需更新必要的位。

如果将内容替换为

html（）

则附加到元素的所有事件侦听器都将丢失，即使重新创建相同的标记也是如此。事实上，监听器仍在内存中，并且会使浏览器的RAM消耗变得杂乱无章，但情况不同

你有两种可能：

替换html内容后，重新创建事件侦听器。因此，您应该将整个click listener回调分配给一个变量。但这并不是最容易维护和最优雅的解决方案

如果可能，不要破坏仍将使用的元件。相反，只需修改已更改的元素（如第二个示例中所示）。这样，您甚至可以使用一些高亮显示动画来通知用户更新

---

另外，我支持net.uk.sweet在评论部分所说的：生成html应该与ajax javascript处理分开。只需更新必要的位。

您真的需要在jQuery中生成所有HTML吗？为什么不静态地创建它的大部分，并用动态数据替换您需要的位呢？您真的需要在jQuery中生成所有HTML吗？为什么不静态地创建它的大部分，并用动态数据替换所需的位呢？这是一个很好的建议，但是为什么第一个示例不起作用，而第二个示例起作用呢？因为第一个示例从dom中删除了

.question

和

.navigation

元素，而dom会分离事件侦听器，第二个例子没有，因为只有这些元素的内部内容是replaced@Alp非常感谢，这很有道理。是的，我用的是我的第二个例子，我只是想知道为什么第一个不起作用，但现在这是有意义的。非常感谢您抽出时间，我很感激！这是一个很好的建议，但是为什么第一个示例不起作用，而第二个示例起作用呢？因为第一个示例从dom中删除了

.question

和

.navigation

元素，这会分离事件侦听器，并且