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>

Answer 1

这是附录之后的授权问题。通过将click事件绑定到click元素的父元素来解决：

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

感谢大家的关注！