Javascript/JQuery function not triggered after .load : <p>When a user clicks the "search" button in my ASP.NET application, a temporary "spinner" div is loaded. Then when the search (finally) completes, the contents of the spinner div are replaced by the HTML returned by the <code>SubmitSearch</code> method.</p>

<pre><code>$("#spinner").load("@Url.Action("SubmitSearch","Search")");
</code></pre>

<p>I also have this JavaScript file that is loaded in:</p>

<pre><code>$(document).ready(function() {
    $(".card--result").hover(function () {
        alert("hover");
        $(this).css('cursor', 'pointer');
    });

    $(".card--result").click(function() {
        var url = $(this).attr('data-url');
        window.open(url, "_self");
    });
});
</code></pre>

<p>However, the problem is that a div with <code>card--result</code> class is part of the new HTML that gets added to the page after the <code>.load</code> method succeeds. </p>

<p><strong>How can I register the <code>.hover</code> and <code>.click</code> functions so that they are actually triggered on the newly loaded HTML elements?</strong></p>
