jQuery Ajax 重新加载后，项目无法被点击

Question

我正在使用Django

在主体块中

<div id="tag_like">
    {% if liked %}
      <img id="unlike" title="unlike" src="{{ STATIC_URL }}pic/bad.png" />
    {% else %}
      <img id="like" title="like" src="{{ STATIC_URL }}pic/good.png" />
    {% endif %}
</div>

在 on_ready 脚本块中：

$.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
});
$('#like').click(function() {
   $.post("{% url 'likevideo' %}", {uid:{{ login_id }}, videoid:"{{ videoid }}"}, function(data,status){
      $('#tag_like').load(' #tag_like')
   });
});
$('#unlike').click(function() {
   $.post("{% url 'unlikevideo' %}", {uid:{{ login_id }}, videoid:"{{ videoid }}"}, function(data,status){
      $('#tag_like').load(' #tag_like')
   });
});

第一次单击图像时（转到另一张图像），它可以正常工作。但是当再次单击它时，没有发生任何ajax动作。我阅读了：

刷新Django中的div使用JQuery和AJAX

使用trigger（'reload'）进行ajax调用后jqgrid不重新加载

将jQueryui按钮添加到动态添加的内容中

但是还没有达到特定的解决方案... 是否有最小更改的解决方案？

- Leon

Answer 1

使用.on()是因为你正在将DOM加载到ID为tag_like的

中。

$(document).on('click','#like',function(){
    //code here.
});

- Dipesh Parmar

---

没错！感谢这个小而精妙的改变！ - Leon

Answer 2

try this for event binding:

$('#tag_like').on("click", "#like", function() {
   $.post("{% url 'likevideo' %}", {uid:{{ login_id }}, videoid:"{{ videoid }}"}, function(data,status){
      $('#tag_like').load(' #tag_like')
   });
});
$('#tag_like').on("click", "#unlike", function() {
   $.post("{% url 'unlikevideo' %}", {uid:{{ login_id }}, videoid:"{{ videoid }}"}, function(data,status){
      $('#tag_like').load(' #tag_like')
   });
});

- codefreak

Answer 3

就像这样：

$('#tag_like').on("click", "#like", function() {
   $.post("{% url 'likevideo' %}", {uid:{{ login_id }}, videoid:"{{ videoid }}"}, function(data,status){
      $('#tag_like').load(' #tag_like')
   });
});

这种方法非常快，因为它将防止jQuery每次单击按钮时解析整个文档。

- Arvind Bhardwaj

---

True，除了在“#like”后面缺少“，” - Leon