jQuery AJAX: update two parts of a page with scripts inside the response

Question

Hello, I'm using jQuery AJAX to load (and refresh) a part of my page

Here's the jQuery function in my main page:

function updateCategories(){
    catList = $('#cat_list');
    catList.hide();
    //send the post to shoutbox.php
    $.ajax({
        type: "POST", url: "../ajax/products-categories.php", data: "action=refresh",
        complete: function(data){
            catList.html(data.responseText).fadeIn();
        }
    });
}
$(document).ready(function(){
    updateCategories();
});

And here's the requested file ("../ajax/products-categories.php"):

<ol id="categories">
    <li>Item 1 <span class="actions">Edit | Delete</span</li>
    <li>Item 2 <span class="actions">Edit | Delete</span</li>
    <li>Item 3 <span class="actions">Edit | Delete</span</li>
</ol>
<script type="text/javascript">
$(document).ready(function(){
    $("#categories li").hover(function(){
        $("span.actions", this).css("visibility", "visible")
    },function(){
        $("span.actions", this).css("visibility", "hidden")
    });
</script>

No problem 'til here, everything is fine and pretty working: the content is loaded, and when I hover the 'li's the .actions spans are correctly shown/hidden

But I have to update TWO parts of my page, so I was going to update this way:

function updateCategories(){
    catList = $('#cat_list');
    catSelect = $('#cat_select');
    catList.hide();
    catSelect.hide();
    //send the post to shoutbox.php
    $.ajax({
        type: "POST", url: "../ajax/products-categories.php", data: "action=refresh",
        complete: function(data){
            catSelect.html($('#tempSelect',data.responseText).html()).fadeIn();
            catList.html($('#tempList',data.responseText).html()).fadeIn();
        }
    });
}
$(document).ready(function(){
    updateCategories();
});

And the requested page:

<div>
    <div id="tempSelect">
        bla bla bla
    </div>
    <div id="tempList">
        <ol id="categories">
            <li>Item 1 <span class="actions">Edit | Delete</span</li>
            <li>Item 2 <span class="actions">Edit | Delete</span</li>
            <li>Item 3 <span class="actions">Edit | Delete</span</li>
        </ol>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#categories li").hover(function(){
                $("span.actions", this).css("visibility", "visible")
            },function(){
                $("span.actions", this).css("visibility", "hidden")
            });
        </script>
    </div>
</div>

Well, the "tempList" 'ol' is loaded, but the "hover script" doesn't work anymore... Why is it so? Is there a solution? I trued to put the "hover script" in the main page, but no luck still... Please, can you help me? Thanks...

Answer 1

You cannot bind events normally to elements that have not yet been created.

try this in your main page:

$(function() { //on dom ready
        $('#categories li').live('mouseover mouseout',function(){
          if (event.type == 'mouseover') {
            // do something on mouseover
         $("span.actions", this).css("visibility", "visible");
          } else {
            // do something on mouseout
            $("span.actions", this).css("visibility", "hidden");
          }
        });
});

Answer 2

Why don't you add the script to the complete function and avoid sending it everytime? Other option will be adding you own separator in the returned code so you can split the return in 3 chunks and use them as you wish avoiding using $(selector,text) that is the part causing problems.

EDIT:

After checking you code this works and it is not too hackish.

function updateCategories(){
    catList = $('#cat_list');
    catSelect = $('#cat_select');
    catList.hide();
    catSelect.hide();
    //send the post to shoutbox.php
    $.ajax({
        type: "POST", url: "ajax.php", data: "action=refresh",
        complete: function(data){
            data = data.responseText.split("###");
            if (data.length >= 3) {
                catSelect.html(data[0]).fadeIn();
                catList.html(data[1]).fadeIn();
                div = document.createElement("div");
                div.innerHTML = data[2];
                document.body.appendChild(div);
            }
        }
    });
}
$(document).ready(function(){
    updateCategories();
});

And the php contents:

<div id="tempSelect">blah blah blah</div>
###
<div id="tempList">
    <ol id="categories">
        <li>Item 1 <span class="actions">Edit | Delete</span></li>
        <li>Item 2 <span class="actions">Edit | Delete</span></li>
        <li>Item 3 <span class="actions">Edit | Delete</span></li>
    </ol>
</div>
###
<script type="text/javascript">
        // <![CDATA[
        $(document).ready(function(){
            $('#categories li').mouseover(function(e) {
                e.stopPropagation();
                $('> .actions', this).css('visibility', 'visible')
            });
            $('#categories li').mouseout(function(e) {
                e.stopPropagation();
                $('.actions').css('visibility', 'hidden')
            })
        });
        // ]]>
</script>