jQuery code doesn't work in ASP.NET user control
<p>i am using jQuery colorbox plugin.
it is true with asp.net page but not in asp.net user control.
what is the problem?</p>

<pre><code>&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;ColorBox Examples&lt;/title&gt;
    &lt;style type="text/css"&gt;
        body
        {
            font: 12px/1.2 Verdana, Arial, san-serrif;
            padding: 0 10px;
        }
        a:link, a:visited
        {
            text-decoration: none;
            color: #416CE5;
            border-bottom: 1px solid #416CE5;
        }
        h2
        {
            font-size: 13px;
            margin: 15px 0 0 0;
        }
    &lt;/style&gt;
    &lt;link media="screen" rel="stylesheet" href="colorbox.css" /&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="../colorbox/jquery.colorbox.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function () {
            //Examples of how to assign the ColorBox event to elements
            $("a[rel='example1']").colorbox();
            $("a[rel='example2']").colorbox({ transition: "fade" });
            $("a[rel='example3']").colorbox({ transition: "none", width: "75%", height: "75%" });
            $("a[rel='example4']").colorbox({ slideshow: true });
            $(".example5").colorbox();
            $(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
            $(".example7").colorbox({ width: "80%", height: "80%", iframe: true });
            $(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" });
            $(".example9").colorbox({
                onOpen: function () { alert('onOpen: colorbox is about to open'); },
                onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
                onClosed: function () { alert('onClosed: colorbox has completely closed'); }
            });

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function () {
                $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
                return false;
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;
        ColorBox Demonstration
    &lt;/h1&gt;
    &lt;h2&gt;
        Elastic Transition
    &lt;/h2&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee."&gt;Grouped Photo 1&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;
    &lt;/p&gt;
    &lt;h2&gt;
        Fade Transition
    &lt;/h2&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee"&gt;Grouped Photo 1&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;
    &lt;/p&gt;
    &lt;h2&gt;
        No Transition + fixed width and height (75% of screen size)&lt;/h2&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee."&gt;Grouped Photo 1&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;
    &lt;/p&gt;
    &lt;h2&gt;
        Slideshow&lt;/h2&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee."&gt;
            Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;
    &lt;/p&gt;
    &lt;h2&gt;
        Other Content Types&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class='example5' href="test.aspx" title="Homer Defined"&gt;Outside HTML (Ajax)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class='example5' href="../content/flash.html" title="Royksopp: Remind Me"&gt;Flash / Video (Ajax/Embedded)&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health"&gt;
            Flash / Video (Iframe/Direct Link To YouTube)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class='example7' href="http://google.com"&gt;Outside Webpage (Iframe)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class='example8' href="#"&gt;Inline HTML&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;
        Demonstration of using callbacks&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island"&gt;Example with alerts&lt;/a&gt;. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.&lt;/p&gt;
    &lt;!-- This contains the hidden content for inline calls --&gt;
    &lt;div style='display: none'&gt;
        &lt;div id='inline_example1' style='padding: 10px; background: #fff;'&gt;
            &lt;p&gt;
                &lt;strong&gt;This content comes from a hidden element on this page.&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;
                The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.&lt;br /&gt;&lt;a id="click" href="#" style='padding: 5px; background: #ccc;'&gt;Click me, it will be preserved!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;
                &lt;strong&gt;If you try to open a new ColorBox while it is already open, it will update itself with the new content.&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;
                Updating Content Example:&lt;br /&gt;&lt;a class="example5" href="../content/flash.html"&gt;Click here to load new content&lt;/a&gt;
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
