使用jQuery在目标div中加载内容

Question

So the first part of the code works fine as it should be, the two grid and list view loads in the views-div when clicked, however, I want a default view shown in the views-div using jquery, I tried loading using clone and prependto but it doesn't work. any suggestion on how to do this?

note: the content I'm loading from the backend has tags and ID's so if I use the html markup to show a default content in the views-div the content repeats. So I'm hoping if use jquery to load content, the repeating will not occur.

here's a demo 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

The simplest solution could be is to trigger a click event

 $(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> 

Answer 2

I know that this has been resolved, but just in case anyone was wondering where OP went wrong, I have a theory.

This:

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

Should be changed to this:

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

If the .iw-grid-list-col element was an immediate child of #iw-grid-view , then find() wouldn't have found it when called on the return value of contents() . This is because find() searches through descendants of elements. The return value of contents() , in this case, would have included the .iw-grid-list-col element and find() would not have found it since it was a member of the array that find() was called on, rather than a descendant of a member of the array.

Removing contents() from that chain of function calls allows find() to search all of the descendants of #iw-grid-view instead of just the descendants of its immediate children.