Loading content from external HTML files

Question

I'm using jQuery's .get() method to load content from external HTML files into my main index file. I created 25 different functions, function videoLoad1(), function videoLoad2() etc, for the 25 videos that I'm loading separately when its corresponding link is clicked. The content that is being swapped out in my HTML index file is the video src and video details. I'm new to jQuery and have been trying to find a more practical way of writing the code.

HTML - links for the onclick function:

<div class="row">
    <div id="movie_list" class="movie_sec-1 pull-left">
        <h6><a href="Javascript:void(0);" id="cars_hb">cars.com: be honest</a></h6>
        <h6><a href="Javascript:void(0);" id="cars_t">cars.com: tag</a></h6>
    </div>
</div>

HTML for video inclusion:

<div id="kz-video" style="display: none;"></div>

External HTML file that is being loaded via $.get() (file name is cars_bh.html):

<div class="video-info">
    <h1>Video</h1>
    <h4>Now Playing</h4>
    <h4>cars.com: be honest</h4>
</div>
    <!-- Video -->
<video id="kz-player" width="100%" height="100%" controls preload>
    <source src="vid/CarscomBeHonest.mp4"  type='video/mp4;'>
    <source src="vid/CarscomBeHonest.webmhd.webm" type='video/webm;'>
    <source src="vid/CarscomBeHonest.oggtheora.ogv"  type='video/ogg;'>
</video>

jQuery function:

function videoLoad2() {

$("a#cars_hb").click(function(e) {
e.preventDefault();
e.stopPropagation();
$.get('cars_hb.html', function( data ) {
  $('#kz-video').html( data );
  });
});

//close overlay/hide content
$('.close').click(function (e) {
e.stopPropagation();
$('#kz-player')[0].pause();
$('#kz-video').hide();
$('.close').fadeOut(800);
$('#video_overlay').fadeOut(800);
});
}

Answer 1

When you say

I created 25 different functions for the 25 videos that I'm loading separately when its corresponding link is clicked.

Does that mean you have multiple function videoLoad#() { ?

I think this will help:

$("div#movie_list a").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    id = e.target.id;
    loadVideo(id);
});

function loadVideo(id) {
    file = id + ".html";
    $.get(file, function (data) {
        $('#kz-video').html(data);
    });
});