javascript - 使用 jquery 加载目标 div 中的内容

Question

因此，代码的第一部分工作正常，单击时，两个网格和 ListView 会加载到views-div中，但是，我想要使用jquery在views-div中显示默认 View ，我尝试过使用克隆和 prependto 加载，但它不起作用。关于如何做到这一点有什么建议吗？

注意:我从后端加载的内容有标签和ID，所以如果我使用html标记在views-div中显示默认内容，内容会重复。所以我希望如果使用jquery加载内容，就不会发生重复。

这是一个演示 http://jsfiddle.net/soulsurfer/eta0uyye/

$(document).ready(function() {

$('.iw-grid-select, .iw-list-select').on('click', function() {
    var aID = $(this).attr('href');
    var elem = $('' + aID).html();
    $('#iw-grid-view').fadeOut("slow", 1000);
    $('#iw-listview').fadeOut("slow", 1000);
    $('#iw-views-div').html(elem);

});

$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
});

Answer 1

最简单的解决方案可能是触发点击事件

$(document).ready(function() {

  $('.iw-grid-select, .iw-list-select').on('click.view', function() {
    var aID = $(this).attr('href');
    var elem = $('' + aID).html();
    $('#iw-grid-view').fadeOut("slow", 1000);
    $('#iw-listview').fadeOut("slow", 1000);
    $('#iw-views-div').html(elem);
  }).first().trigger('click.view');


});

.iw-listview,
.iw-grid-view {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iw-filter-col ">
  <a href="#iw-grid-view " class="iw-grid-select ">grid view link</a>&nbsp;
  <a href="#iw-listview " class="iw-list-select ">list view link</a>
</div>
<div class="row iw-listing-view-row">
  <div class="iw-grid-view" id="iw-grid-view">Grid view content</div>
  <div id="iw-listview" class="iw-listview">list view content</div>
  <div class="iw-views-div" id="iw-views-div">Content loading column</div>
  <div id="loading"></div>
</div>