-1

我正在一个网站上工作，当用户单击菜单上的一个选项时，内容会自行加载（通过 Ajax 调用）到一个 div 框中，该框出现在屏幕的中心。我遇到的问题是我无法弄清楚为什么所有 javascript/jquery 代码似乎都不适用于任何加载的内容。我需要在加载的内容本身中重新声明所有 javascript 和 jquery 文件才能运行。

本质上，用户从菜单中单击“用户列表”：

    $('#users_list').live("click", function(event) {
    event.preventDefault();
    $('.prompt_content').load('users.php?page=1', function() {
        showprompt();
    });
    });

然后 div 框出现在屏幕中央，其中包含所有用户名和一个小头像。当用户将光标悬停在用户信息框上时，我正在尝试更改用户信息框的背景颜色。

$('.user_info').hover(function() {
    $(this).prev('td').css("background-color", "#F0F0F0");
    $(this).css("background-color", "#F0F0F0");
}, 
function() {
    $(this).prev('td').css("background-color", "white");
    $(this).css("background-color", "white");
});

$('.user_avatar').hover(function() {
    $(this).next('td').css("background-color", "#F0F0F0");
    $(this).css("background-color", "#F0F0F0");
}, 
function() {
    $(this).next('td').css("background-color", "white");
    $(this).css("background-color", "white");
});

仅当我在要加载其内容的页面顶部重新声明我的 jquery 链接时，这似乎才有效...

这是标记（请原谅内联 css，它只是用于调试）：

<table>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_10">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_10">Dave Gilbert
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_15">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_15">Norman De luca
        </td>
    </tr>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_24">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_24">Test user 1
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_17">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_17">Test user 2
        </td>
    </tr>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_21">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_21">Test user 3<br />
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_18">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_18">Test user 4
        </td>
    </tr>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_22">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_22">Test user 5
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_16">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_16">Leonard Klein
        </td>
    </tr>
</table>
4

2 回答 2

1

这是因为它在 dom 中不可用，并且您正在直接访问.hover()动态内容，因此您必须使用.on()处理程序：

$(document).on('hover', '.user_info', function() {
   $(this).prev('td').css("background-color", "#F0F0F0");
   $(this).css("background-color", "#F0F0F0");
},function() {
   $(this).prev('td').css("background-color", "white");
   $(this).css("background-color", "white");
});

Instead using $(document)您可以使用最近的父现有 div 或任何元素，例如：

$('.prompt_content').on('hover', '.user_info', function() {
   $(this).prev('td').css("background-color", "#F0F0F0");
   $(this).css("background-color", "#F0F0F0");
},function() {
   $(this).prev('td').css("background-color", "white");
   $(this).css("background-color", "white");
});
于 2013-01-07T06:03:18.727 回答
1

问题是您在添加动态元素之前附加事件，因此它们不受影响。要解决此问题，您必须执行以下操作：

// attach to the closest parent element that is on the loaded page (not ajax)
$("body").on({ 
    mouseenter: function () {
        $(this).prev('td').css("background-color", "#F0F0F0");
        $(this).css("background-color", "#F0F0F0");
    },
    mouseleave: function () {
        $(this).prev('td').css("background-color", "white");
        $(this).css("background-color", "white");
    }
}, '.user_info'); // <- selector here
于 2013-01-07T06:06:30.920 回答