-1

ユーザーがメニューのオプションをクリックすると、画面の中央に表示される div ボックスに (Ajax 呼び出しを介して) コンテンツが読み込まれるサイトで作業しています。私が抱えている問題は、読み込まれたコンテンツのいずれに対しても 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

問題は、動的要素が追加される前にイベントをアタッチしているため、影響を受けないことです。これを修正するには、次のようなことを行う必要があります。

// 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 に答える
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 に答える