Jquery not behaving as expected with .not and .on
<p>I want to prevent two events from being watched for an element (mouseenter and mouseleave to be specific) if that certain element doesn't have a css class defined.</p>

<p>The flow of this system is</p>

<ol>
<li><p>On document ready, I add the class .selected to the #menu_top_option_1 element
    <code>$("#menu_top_option_1").addClass("selected");</code></p></li>
<li><p>There is a sensor for those two events
    <code>$("#menu_top_option_1").not(".selected").on({
    mouseenter: function(){
        $(this).addClass("highlighted");
    },
    mouseleave: function(){
        $(this).removeClass("highlighted");
    }
});</code></p></li>
<li>When there is a click event I add the class .selected to the #menu_top_option_1 element.
    <code>$("#menu_top_option_1").click(function () {
    $("#menu_top_arrow_img").animate({left: position_menu_top_option_1+'px'}, 500);
    $(this).removeClass("highlighted");
    $("#option_wrapper div.option").removeClass("selected");
    $(this).addClass("selected");
});</code></li>
</ol>

<p>There is a live link to this exact script at <a href="http://www.morganwilde.me" rel="nofollow">http://www.morganwilde.me</a></p>

<p>The problem: this does not work as expected. The elements still have the same hover events as they did before being assigned the .selected even after adding .selected to them. Except for the #menu_top_option_1 element, because I suspect it does have that class added at document ready.</p>

<p>Any suggestions?</p>
