title: date picker jquery plugin not working in another page via jquery load method
body: <p>I have two html main.html and a.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; main.html   &lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
       $("#y").click(function()
       {
         $('#y1').load('a.html');
       });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="y"&gt;link1    &lt;/div&gt;
    &lt;div id="y1"&gt;frame   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>a.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;a.html    &lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
  &lt;script&gt;
  $(document).ready(function(){
        $("#date").datepicker();
        $("#y2").on("click",function(){
            alert("clicked data in a.html");
        });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="y2"&gt; click here to get alert   &lt;/div&gt;
    &lt;input id="date" type="text" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>when I open a.html file the datepicker works good, 
  but open main.html file click 'link1' to load the a.html into main.html
  datepicker fails and I get a error message in firefox error console as </p>
  
  <pre><code>&gt;Error: TypeError: $(...).datepicker is not a function
  &gt;Source File: http://code.jquery.com/jquery-latest.js?_=1362478481277
  &gt;Line: 605
  </code></pre>
  
  <p>[EDITIED to improve my question below]</p>
  
  <p>now my main.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; main.html   &lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"&gt;&lt;/script&gt;  
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
  &lt;script&gt;
  $(document).ready(function() {
       $("#y").click(function()
       {
         $('#y1').load('a.html');
       });
       $("#y4").click(function()
       {
         $('#y1').load('b.html');
       });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="y"&gt;link1    &lt;/div&gt;
    &lt;div id="y4"&gt;link2    &lt;/div&gt;
    &lt;div id="y1"&gt;frame   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>a.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;a.html    &lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
  &lt;script&gt;
  $(document).ready(function(){
        $("#date").datepicker();
        $("#y2").on("click",function(){
            alert("clicked data in a.html");
        });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="y2"&gt; click here to get alert   &lt;/div&gt;
    &lt;input id="date" type="text" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>b.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;b.html    &lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
  &lt;script&gt;
  $(document).ready(function(){
        $("#date1").datepicker();
        $("#y3").on("click",function(){
            alert("clicked data in b.html");
        });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="y3"&gt; click here to get alert   &lt;/div&gt;
    &lt;input id="date1" type="text" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>