javascript - 找不到 Ajax 返回的元素

Question

我正在 CodeIgniter 框架中工作，并按照如下逻辑发出 Ajax 请求...

 $.ajax({
            type: "POST",
            url: "/ci/ajaxCustom/createTimePicker",
            data: '',
            success: function(html) {
                $('#nav').show().html(html);    
            }
        });

PHP 函数返回我的 ajaxCustom 文件中的 html...

function createTimePicker() {   
$ampm = array("am","pm");
$hours = array("1","2","3","4","5","6","7","8","9","10","11","12");
$minutes = array("00","15","30","45");
        foreach($ampm as $amkey):
            $timemenu .= '<li><a href="javascript:void(0)" id="ampm" class="menulink">'.$amkey.'</a>';
            $timemenu .= '<ul class="time_menu">';
                foreach($hours as $hour):
                    $timemenu .= '<li><a href="javascript:void(0)" id="hour" class="menulink">'.$hour.$amkey.'</a>';
                    $timemenu .= '<ul>';
                        foreach($minutes as $minute):
                        $timemenu .= '<li><a href="javascript:void(0)" id="minute" class="menulink">'.$hour.':'.$minute.' '.$amkey.'</a></li>';
                        endforeach;
                    $timemenu .= '</ul>';
                    endforeach;
            $timemenu .= '</ul>';
            $timemenu .= '</li>';
        endforeach;

        echo $timemenu;
} 

我正在尝试使用 YUI 库来设置事件监听器，其看起来像这样......

this._setTimeButton = document.getElementsByClassName("menulink");
YAHOO.util.Event.addListener(this._setTimeButton, "click", this._setTime, null, this);

以及单击菜单项时执行的 _setTime 函数...

_setTime: function() {
    alert("here");
}

这就是问题所在，我过去也遇到过这个问题，但解决了它。我为此项目设置的所有点击监听器都工作正常，只是那些尝试监听 Ajax 返回的元素点击的监听器。我假设 DOM 已经设置，因此 YAHOO 事件监听器无法找到 Ajax 请求返回的新附加的 HTML。我可以做些什么来重建 DOM 或其他解决方案吗？

我通常不会使用 Ajax 返回 HTML，但在本例中我需要这样做，但我似乎无法解决这个问题。感谢您的帮助!

Answer 1

看起来这里的问题是您分配事件处理程序，然后稍后添加元素。委托(delegate)将解决这个问题。

使用 jQuery 像这样分配事件处理程序...

$("#nav").on("click", ".menulink", function() {
    _setTime();  // or just put the contents of _setTime here, if you don't run it anywhere else
});

这会将事件处理程序分配给 #nav 元素，对于每个具有 .menulink 类的子元素，无论它们在分配时是否存在或不是。