Jquery event fires once
<p>I have a menu with the li <code>#kings</code>. On click it drops a div <code>#kings-drop</code> and loads <code>kingslineup.html</code> . Inside the <code>kingslineup.html</code> is a picture that when clicked animates a div from the side. On <code>mouseleave</code> both divs slide up. Everything works fine except when I try to run it again without page refresh. The animated div out of the side does not fire. I'm guessing it has something to do with the <code>kingslineup.html</code> when loaded again. Can anyone explain why this is happening?</p>

<pre><code>$('#kings').on('click', function(e) {
    e.preventDefault();

    $('#kings-drop').slideUp('slow', function() {
        $(".kings-drop-inner").empty().html('');
    });

    $('#kings-drop').slideDown('slow', function() {
        $('.kings-drop-inner').load('kingslineup.html', function() {}).hide().fadeIn('slow');

    });

    $('.kings-drop-inner').on('click', "#jimmer", function() {   
        $('#player-drop').animate({width:'toggle'},350);
    });

    $('.one').mouseleave(function() {
        setTimeout(function () {
        $('#kings-drop').slideUp();}, 250);

        $('#player-drop').animate({width:'0px'},350);

    });
});
</code></pre>
