jquery - getJSON 函数与其他简单函数冲突

Question

我正在使用 getJSON 构建产品列表页面 - 工作正常 - 但在同一个文档中，我也有一些简单的点击功能拒绝工作。估计有冲突？请帮忙！

<script>
$(document).ready(function(){
  $.getJSON("data.json", function(data){
    var product_data = '';

    $.each(data, function(key, value){

  // Build product tile
    product_data += '<h3>'+value.name+'</h3>';
    });
    $('#plp-main').append(product_data);
  });

}); 

$(document).ready(function(){
    $( ".element1" ).on( "click", function() {
      $( ".element2" ).toggleClass( "active" );
    });
});
</script>

标签： jqueryonclickgetjson

Answer 1

It's a delegation issue following the append. Solved by binding the click event to the parent of the click element thus:

$(document).ready(function(){
    $( "#parent" ).on( "click", ".element1", function() {
      $( ".element2" ).toggleClass( "active" );
    });
});

Thanks everyone for your interest!