Question

使用Python我已经从Facebook创建了一个源，它被加载到这个：

<div class="col-md-12"> 
<section id="cd-timeline" class="cd-container">
{% for item in merged  %} 
<div class="cd-timeline-block">
  <div class="cd-timeline-img cd-success">
            <i class="fa fa-tag"></i>
  </div> <!-- cd-timeline-img -->

  <div class="cd-timeline-content">
    <h2>{{item.1}}</h2>
    <p>{{item.5|safe}}</p>
    {% if  item.2 != '<p> </p>'%} 
    <p> <img src="{{item.2|safe}}"/> {% endif %} <p> {{item.3|safe}} {{item.4|safe}} </p> </p>
    <span class="cd-date">Jan 14</span>
        <div class="timeline-item-post">

   <div class="timeline-options">

    <a href="#"><i class="icon-like"></i> {{item.6}}</a>

    <button id="{{item.9}}"><i class="icon-bubble"></i> {{item.7}} </button>

    <a href="#"><i class="icon-share"></i>  {{item.8}}</a>

    </div>



    <textarea class="form-control" placeholder="Replay"></textarea>
       </div>  
  </div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
  {% endfor %}

现在，如果我单击按钮{{item.9}}我想要一个jQuery请求，为这个元素加载JSON响应（item.9引用帖子ID），而不再重新加载页面并附加div低于cd-timeline-content并显示其中的JSON内容。

<div class="timeline-comment">
<div class="timeline-comment-header">
 <img src="assets/images/avatar5.png" alt="">
  <p>Nick Doe <small>1 hour ago</small></p>
  </div>
  <p class="timeline-comment-text">Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    </div>

这是我唯一的想法，但看起来很愚蠢而且不起作用。复制每个帖子的javascript代码似乎是一个坏主意。

{% for item in merged  %} 
<script> 
$("#{{item.9}}").on('click', function() {
  alert('something');
    $.getJSON("data.json", function(data) {
        //Handle my response

    });
});
</script>
{% endfor %}

感谢帮助。

Answer 1

为每个按钮设置一个相同的类：

<button class="myEvent" id="{{item.9}}"><i class="icon-bubble"></i> {{item.7}} </button>

$('.myEvent').on("click",function(e){
    e.preventDefault();
    $.getJSON("data.json", function(data) {
    //Handle my response

    });

});

使用此解决方案，您将获得整个json文件未被“item”过滤。过滤过程必须在函数内完成。

希望这个帮助

jQuery ajax获取API请求追加元素来纠正div

1 个答案: