ユーザーがメニューのオプションをクリックすると、画面の中央に表示される 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>