ajax応答によって作成される動的なメニューリンクがあります。ページが最初に読み込まれたときにのみ機能しますが、新しいページは機能しません。.Onを使用してバインドしようとしましたが、機能しません。コードとマークアップをご覧ください。うまくいけば、誰かがそれがバインドされない理由を知っているでしょう。
$(document).ready(function(){
$(document).on('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("menu")){
$(".menu dd ul").hide();
$(".menu dt a").removeClass("selected");
}
});
$(".menu dt a").on('click', function(e) {
var clickedId = "#" + this.id.replace(/^link/,"ul");
// Hides everything else that the current menu
$(".menu dd ul").not(clickedId).hide();
//Toggles the menu.
$(clickedId).toggle();
//Add the selected class.
if($(clickedId).css("display") == "none"){
$(this).removeClass("selected");
}else{
$(this).addClass("selected");
}
});
});
そして、マークアップは以下のとおりです。
<div class="floatLeft" style="width:15px;">
<dl style="" class="menu">
<dt>
<a class="" id="linkglobal_1" style="cursor: pointer;"></a><span class="result"></span></dt>
<dd>
<ul style="display: none;" id="ulglobal_1">
<li><a href="#">Friends</a></li>
<li><a href="#">Only Me</a></li>
<li><a href="#">Customize</a></li>
</ul>
</dd>
</dl>
</div>