jQuery ajax 获取 API 请求追加元素以更正 div

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 附加到 @ 987654324@ 并在其中显示 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 文件。过滤过程要在函数内部完成。

希望有帮助