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

看起来这里的问题是您分配事件处理程序，然后稍后添加元素。代表团将解决这个问题。

使用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元素。

Answer 2

我假设有多个元素具有类名menulink。所以，我会像这样更改你的代码，这样你只能获得具有该类名的第一个元素：

this._setTimeButton = document.getElementsByClassName("menulink")[0];

或者你可以浏览具有该类名的每个元素并添加一个事件监听器：

for(var i = 0; i < this._setTimeButton.length; i++)
{
    YAHOO.util.Event.addListener(this._setTimeButton[i], "click", this._setTime, null, this);
}

找不到Ajax返回的元素

2 个答案: