0

我正在为客户网站构建一个测验，我从 Ajax 调用中获取问题，然后用新问题替换 HTML 内容，问题是我的 Ajax 调用只工作一次，然后如果我再试一次就会失败. 当我一次全部替换内容html()失败时，如果我将其分解为多个部分并html()为每个部分替换 do 它没有问题，但是当我一次完成所有内容时，如果第一次之后失败，如果有人可以接受看看我的代码并告诉我为什么会这样，非常感谢，在此先感谢！

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

        }
    }); 
});
4

1 回答 1

5

如果您使用附加到元素的所有事件侦听器替换内容html()，则即使您再次重新创建相同的标记，也会丢失。事实上，监听器仍然在内存中，并弄乱了浏览器的 RAM 消耗，但那是另一回事了。

你有两种可能：

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

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

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

于 2013-06-27T00:11:11.800 回答