Question

i have this script on the page where i want to load the file

<SCRIPT type="text/javascript">
$(function() 
{           
        $("#storefront").click(function () {
            alert("POTANGINA");
           $(".centerdiv").load("storefront_a.php");
       });  

});             
</SCRIPT>

and i have this script on the page i want to load (storefront_a.php)

<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="http://cssglobe.com/lab/easypaginate/js/easypaginate.js"></SCRIPT>
<script type="text/javascript">

    jQuery(function($){

        $('ul#items').easyPaginate({
            step:5
        });

    });    

</script>

<style>
        #page li {
          display: inline;
          position: relative;
          width: 11em
          margin:10px; 
          padding:10px;
        }
        #page li li{ display: block; height: 1.5em;}

</style>


<div id = "page">       
<ul id="items">
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
    <li>Page 6</li>
    <li>Page 7</li>
    <li>Page 8</li>
    <li>Page 9</li>
    <li>Page 10</li>
    <li>Page 11</li>
    <li>Page 12</li>
    <li>Page 13</li>
    <li>Page 14</li>
</ul>
</div>

when i ran the storefront_a.php directly from the localhost it worked. but when i call it using load() it is actually loading but the javascript did not worked. PLease help me thanks

Answer 1

If storefront element is added dynamically then click will not work because jQuery cannot attach event handler if the element is not available on page load.

You have to basically use delegate or on to add event handlers for dynamically created elements.

 $(document).on("click", "#storefront", function () {
     alert("POTANGINA");
     $(".centerdiv").load("storefront_a.php");
 }); 

Instead of document you can specify the parent container of storefront element which will be available on the page.

Note that on is introduced in jQuery ver 1.7. If you are using older version then use delegate

 $(document).delegate("#storefront", "click", function () {
     alert("POTANGINA");
     $(".centerdiv").load("storefront_a.php");
 }); 

References:

• .on() – http://api.jquery.com/on/
• .delegate() – http://api.jquery.com/delegate/