can't find elements returned by Ajax

Question

I'm working in the CodeIgniter framework and making an Ajax request in the logic like so...

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

The PHP function to return html in my ajaxCustom file...

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;
} 

I'm trying to use the YUI library to set event listeners and the one for this looks like this...

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

And the _setTime function to execute when the menu item is clicked...

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

Here's the problem, and I've ran into this in the past but worked around it. All the click listeners I have set for this project work fine, it's only the ones attempting to listen for clicks on elements returned by Ajax. I'm assuming that the DOM is already set so the YAHOO event listener can't find the newly appended HTML returned by the Ajax request. Is there something I can do to rebuild the DOM or another solution?

I don't normally return HTML with Ajax but in this instance I needed to, but I can't seem to get around this issue. Thanks for the help!

Answer 1

It looks like the problem here is that you assign the event handler and then add the elements later on. Delegation will solve that problem.

Use jQuery to assign the event handler like this...

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

That will assign the event handler to the #nav element, for every child element with the class .menulink, regardless of whether they exist at the time of assigning or not.

Answer 2

I'm assuming there are multiple elements that have the class name menulink. So, I would change your code like this, so that you only get the first element with that class name:

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

OR you can go through each element with that class name and add an event listener:

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