use jquery inside data returnd by ajax using " innerHtml"

Question

hi ,

I want to use jquery inside data returnd by ajax using " innerHtml" .. look here ,

<a href=\"#\"
onclick=\"$.post('". $url ."', {'t' : 't'}, function(data){
        $('content_rows').attr('innerHTML',data);}); " . $this->js_rebind .";return false;\">"
 $text .'</a>';

this link makes moving between the pages by ajax "by reloading the div that contains the data" , without - of course - reloading whole page . like this :

<div id="content_rows">
rows from mysql database
</div>

now everything is Ok , but , I use " detailsRow Plugin " like this :

<script type="text/javascript">
$(document).ready(function() {
 $('#rows').detailsRow('admin/blog/detailsRow',{
   data:{"id":"id"} ,
       dataType: "script"
      });
});
</script>

this plugin makes every TR/Row in the table get more details by click (+-) .. go there : http://webworkflow.co.uk/plugins/detailsRow/

now this plugin works fine in the frist page ( before reload the div by jquery ) but after reloading the div and in the other pages or also when I go back to the frsit page it dos`nt work .. I put the code inside content_rows div like this :

<div id="content_rows">
    <script type="text/javascript">
    $(document).ready(function() {
     $('#rows').detailsRow('admin/blog/detailsRow',{
       data:{"id":"id"} ,
           dataType: "script"
          });
    });
    </script>
</div>

but also doesnt work .. sorry I`m beginner in jQuery .. thanks ..

Answer 1

It sounds like you need to call the $.detailsRow() function to modify the newly added DOM elements you create in the callback from the Ajax request. Just add a line to the callback function for $.post() like so:

$.post('". $url ."', {'t' : 't'}, 
    function(data){
        $('content_rows').attr('innerHTML',data);
        $('#rows').detailsRow('admin/blog/detailsRow',
            {
                data:{"id":"id"} ,
                dataType: "script"
            }
         );
    }
);

Or you could separate the call to $.detailsRow() into a separate function and use it as the callback for $(document).ready() and call it from within the $.post() callback.