call jQuery twice

Question

Hello there .. I want to use jQuery code inside content(div) is already loaded by jQuery .. here is my Example code ..

    <!-- Slide Panel with Form Adding data  -->
<div style="display: none;" id="slideAddForm" >
<h2>Add Row</h2>
from here ..
</div>

<div class="tabs"> <!-- Tabs -->
    <ul>
        <li><a href="#first"> frist</a></li>
        <li><a  class="secondA" href="#second"> Second </a></li>
        <li><a  class="comments_title" href="#third"> Third </a></li>
    </ul>
</div>

<!-- frist tab .. html data -->
<div id="first">
<a class="bAddRow" href="#"> Add Row  </a>   <!-- To show slideAddForm div .. it`s work OK  -->
anything here ..
</div>

<!-- second tab and 3rd tab get data from server -->
<div id="second">
  <!-- load page in this tab  -->
  <script type="text/javascript">
      $(document).ready(function() {
      $("a.secondA").click(function(){
      $("#second").load("server.php");
      });
      });
  </script>
</div>

<div id="third"></div>

Now , in server.php I put this :

<a class="bAddRow" href="#"> Add Row  </a>  <!-- not work !  -->

But it dose not work ..

you can see , in the frist tab the link (Add Row) work fine, but it dose not work in the (#second) tab because ( I think ) is loaded already by ajax .!

Don`t say put this line

<a class="bAddRow" href="#"> Add Row  </a>

after

<div id="second">

and before javascript code .. because this is a simple code to clear my problem .. my really code is complicated .. and I have to put ( for expamle ) this line (add Row link) in the Server.php and I want it to show slideAddForm div

Any help ? Thanks in advance .. Ahmad ..

Answer 1

Just call it again.

function loader(){
    $("#second").load("server.php");
    clickmaker();
});

function clickmaker() {
    $("a.secondA").click(loader);
}

$(document).ready(clickmaker());

Answer 2

You must be binding code to show the slideAddForm div to .bAddRow somewhere, right? Maybe something like this?

$('.bAddRow').bind('click', function() {
    $('slideAddForm').show();
}

To bind current and future matched elements, use the live method to bind the event instead:

$('.bAddRow').live('click', function() {
    $('slideAddForm').show();
}

(And make sure to read the jQuery documentation for the method, since there are a few differences from bind.)

Answer 3

What function do you call when you click on bAddRow? Also, are you trying to say, you just want to reattach click event to bAddRow when panel is laoded? If so, this should work:

<script type="text/javascript">
var RowAdder = {

   //Initialize
   Init: function() {
      $("a.secondA").click(function() {
         $("#second").load("server.php", function() {
             RowAdder.Attach();     
         });
      });
   },

   //Reattach events
   Attach: function() {
       $(".bAddRow").click(function(){
           //ADD EVENTS BEHIND bAddRow CLICK HERE
       });
   },
};

//Initialize script
$(document).ready(function(){
    RowAdder.Init();
});
</script>