Question

我正在一个网站上，当用户点击菜单上的选项时，内容会将自身（通过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>

Answer 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");
});

Answer 2

问题是您在添加动态元素之前附加事件，因此它们不受影响。要解决这个问题，你必须做这样的事情：

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

jQuery没有处理加载的内容

2 个答案: