jQuery AJAX: обновите две части страницы скриптами внутри ответа

Question

Я использую jQuery AJAX для загрузки (и обновления) части моей страницы

Вот функция jQuery на моей главной странице:

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();
});

И вот запрашиваемый файл ("../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>

Никаких проблем, пока все отлично и работает нормально: контент загружается, и когда я наведите курсор на 'li', диапазоны .actions корректно отображаются / скрываются

Но мне нужно обновить две части моей страницы, поэтому я собирался обновить таким образом:

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();
});

И запрашиваемая страница:

<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>

Ну, "tempList" ol загружен, но "hover script" больше не работает ... Почему это так? Есть ли решение? Я решил поставить «скрипт наведения» на главной странице, но все же не повезло ... Не могли бы вы мне помочь пожалуйста? Спасибо ...

Answer 1

Нельзя связать события, как правило, с элементами, которые еще не были созданы.

Попробуйте сделать это на своей главной странице:

$(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

Почему бы вам не добавить скрипт в полную функцию и не отправлять его каждый раз? Другим вариантом будет добавление вашего собственного разделителя в возвращаемый код, чтобы вы могли разделить возврат на 3 части и использовать их по своему усмотрению, избегая использования $ (селектор, текст), который является причиной проблем.

EDIT:

После проверки вашего кода это работает, и оно не слишком хакерское.

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();
});

И содержание php:

<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>