jQuery Ajax调用点击只能工作一次 [英] jQuery Ajax call on click only works once

查看：123
本文介绍了jQuery Ajax调用点击只能工作一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为客户端网站建立一个测验，我从Ajax调用中获取问题，然后用新的问题替换HTML内容，问题是我的Ajax调用只能工作一次，然后如果我失败再试一次。当我用 html（）一次替换内容时，它会失败，如果我把它分解成几个部分，然后替换为 html（）对于每个部分它的工作没有问题，但是当我一次完成所有这一切，如果第一次失败，如果有人可以看看我的代码，并告诉我为什么会发生这将是非常感谢，谢谢提前！



HTML 

 < section class =widget 12 quiz> 
< div class =content> 
< div class =widget six sign> 
< img src =http://www.mysite.com/images/questions/question-1.jpgalt => 
< / div> 
< div class =widget six question> 
< header> 
< button class =align-right buttondata-object ='{qui_id：0，action：1，que_id：1 /按钮> 
< / header> 
< h2> Q：Lorem Ipsum？< / h2> 
< / div> 
< div class =widget 12 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 buttondata-object ='{qui_id：0，action：0，que_id：1 /按钮> 
< / div> 
< / div> 
< / section>

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）{
 
 $（'。quiz'）。html（'< div class =content>'
 +'< div class =widget six sign>'
 +'< img src =http://www.mysite.com/images/问题/'+ data [0] .que_file +'alt =>'
 +'< / div>'
 +'< div class =widget six question> 
 +'< header>'
 +'< button class =align-right buttondata-object ='+'{qui_id：'+ data [0] .qui_id +  动作： 1， que_id： + data [0] .que_id +'}'+'>跳过< / button>'
 +'< / header>'
 +'< h2> Q：'+ data [0 ] .que_question +'< / h2>'
 +'< / div>'
 +'< div class =widget 12 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 buttondata-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 buttondata-object ='+'{qui_id：'+ data [0] .qui_id +' action：1，que_id：'+ data [0] .que_id +'}'+'>跳过< / 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 buttondata-object ='+'{qui_id：'+ data [0]。 qui_id + '， 动作： 0， que_id：  '+数据[0] .que_id +'} '+' >接着< /按钮>'）; 
 
} 
}）; 
}）;


解决方案

如果用 html（）附加到元素的所有事件侦听器都会丢失，即使您重新创建相同的标记。实际上，听众仍然在记忆中，混乱了浏览器的RAM消耗，但这是一个不同的故事。



你有两种可能性：


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


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


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


I'm building a quiz for a clients website and I'm getting the questions from an Ajax call and then replacing the HTML content with the new question, the problem is my Ajax call only is working once and then fails if I try it again. When I replace the content all at once with html() it fails, how ever if I break it down into sections and replace do html() for each section it works no problem but when I do it all at once if fails after the first time, if anyone could take a look at my code and tell me why this is happening it would be very much appreciated, thanks in advance!

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 Call only works once

$('.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 works no problem

$('.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>');

        }
    }); 
});

解决方案

If you replace content with html() all event listeners attached to elements are lost, even if you are recreating the same markup again. In fact the listeners are still in memory and clutter up the RAM consumption of the browser, but that's a different story.

You have two possibilities:

  1. Recreate the event listeners once you replaced the html content. You should therefore assign the whole click listener callback to a variable. But this is not the most maintainable and elegant solution.

  2. If possible, do not destroy elements that will still be used. Instead, just modify the elements that have changed (like in your working second example). That way you can even use some highlighting animations to notify the user of the update.

Also, i second what net.uk.sweet said in the comment section: generating html should be separated from your ajax javascript handling. Just update the necessary bits.

这篇关于jQuery Ajax调用点击只能工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆