How to load a specific div/class in a file using ajax?

I have a file called main.html that contains several div's each with 2 classes: 1st is their specific class 2nd is a class called menu-item which I use to determine if an event will triggered when clicked.

The file contains this:

<div id="load-here">

</div>

<div class="item-1 menu-item">
    click this
</div>

I also have a gallery.html file which I want to be loaded into the main.html file in the #load-here div, and let's say it contains this:

<div class="menu-item>
    // some image here
    <img href="img/1.jpg />
</div>

The script I have is this:

$(document).ready(function() {
    $( "div" ).click(function() {

        if ( $( this ).hasClass( "menu-item" ) ) {
            $("#load-here").load("gallery.html" + this.class);
        }

    });
});

The problem: It's not working. I've tried various changes. Somehow it's not loading into the #load-here div