jQuery - Dynamic Trigger Not Working

Question

This is one of those FRUSTRATING bugs in that it works and then it doesn't work and doesn't give any debug hints via Firebug.

I have a "media room" page that allows users to view YouTube video and, if a member, comment on the video. When I load the trigger on load, the .on('click'...) trigger acts as expected. However, if the user chooses another video, I .empty() and replace the trigger. After it is dynamically added, it no longer produces the alert.

The page can be seen on a development server at http://dev.edrtrust.com/play/index.php/media/media_room and the triggers I am talking about are the "Comments(0)" directly above the video.

The html/jQuery code contains:

<div id="content_right">
                <div id="videoInfo">
                    <?php if( $cntVids > 0){ ?>
                        <p class="vTitle"><?= $vids[0]['title']; ?></p>
                        <p class="vArtist"><?= $vids[0]['artist']; ?></p>
                        <p class="vPost">
                            <?= "Posted by " . $vids[0]['first_name'] . " " . 
                                $vids[0]['last_name'] . " on " . 
                                substr($vids[0]['postDate'],0,10); ?>
                        </p>
                        <p>Views: <?= $vids[0]['views']; ?></p>
                    <?php } else { ?>
                        <p class="vNone">There are no videos available.<br><br>Please choose another artist from the drop-down menu to the left.</p>
                    <?php } // end if ?>
                    <div id="adminPick" style="display:none;">
                        <img src="<?= base_url('assets/images/ppm_pick.png'); ?>" />
                    </div> <!-- END adminPick DIV -->
                    <br><br>
                    <div class="commentControls">
                        <?php
                            //print_r($vids[0]);
                            $cntComments = $this->content->countMediaComments( $vids[0]['media'] );
                        ?>
                        <table class="tblCommentsControl" align="center" border="0" width="800px" style="margin-left:20px;">
                            <tr>
                                <td style="width:50%;text-align:left;">
                                    <h6 class='lynx btnComments' name="<?= $vids[0]['media']; ?>">
                                        Comments (<span class='cnt'><?= $cntComments; ?></span>)
                                    </h6>
                                </td>
                                <td style="width:50%;text-align:center;">
                                    <?php if( $_SESSION['loggedIn'] && $_SESSION['loggedIn'] == 'true'){ ?>
                                    <h6 class='lynx btnAddCom' name="<?= $vids[0]['media']; ?>">
                                        Add Comment
                                    </h6>
                                    <?php } else { ?>
                                        <h6>Login or register to comment.</h6>
                                    <?php } // end if ?>
                                </td>
                            </tr>
                        </table>
                    </div> <!-- END commentControls DIV -->

                </div> <!-- END videoInfo DIV -->

jQuery:

$('h6.btnComments').on('click', function(e){
            var media_id = $(this).attr('name');
            alert(media_id);
        }); // end comment button click

Lastly, via AJAX, I am replacing the content above when a new video is selected (this is what doesn't work)

public function get_media_by_tube(){
    $id = $this->input->post( 'ytID' );
    $vids = $this->content->getMediaByYT( $id );
    $cntComments = $this->content->countMediaComments( $vids[0]['media'] );
    //echo $this->db->last_query();
    //print_r($vids);
    echo "<p class='vTitle' name='" . $vids[0]['id']. "'>" . $vids[0]['title'] . "</p>";
    echo "<p class='vArtist' name='" . $vids[0]['is_featured'] . "'>" . $vids[0]['artist'] . "</p>";
    echo "<p class='vPost'>Posted by ";
    echo $vids[0]['first_name'] . " " . $vids[0]['last_name'];
    echo " on " . substr($vids[0]['postDate'],0,10) . "</p>";
    echo "<p>Views: " . $vids[0]['views'] . "</p>";
    echo "<div id='adminPick' style='display:none;'>";
    echo "<img src='base_url('assets/images/ppm_pick.png')' />";
    echo "</div> <!-- END adminPick DIV -->";
    echo "<br><br>";
    echo "<div class='commentControls'>";
    echo "<table class='tblCommentsControl' align='center' border='0' width='800px' style='margin-left:20px;'>";
    echo "<tr>";
    echo "<td style='width:50%;text-align:left;'>";
    echo "<h6 class='lynx btnComments' name='" . $vids[0]['media'] . "'>";
    echo "Comments (<span class='cnt'>" . $cntComments . "</span>)";
    echo "</h6></td>";
    echo "<td style='width:50%;text-align:center;'>";
    if( $_SESSION['loggedIn'] && $_SESSION['loggedIn'] == 'true'){
        echo "<h6 class='lynx btnAddCom' name='" . $vids[0]['media'] . "'>";
        echo "Add Comment";
        echo "</h6>";
    } else {
        echo "<h6>Login or Register to Comment</h6>";
    } // end if
    echo "</td>";
    echo "</tr></table></div> <!-- END commentControls DIV -->";
} // end json_get_media_by_tube function

Any and all help is appreciated.

Answer 1

You are using direct event handler, but need delegated one (check jQuery .on() documentation for details) The handler is bound directly to $('h6.btnComments'), but after content replacing this object and all its events are removed. Try to use delegated event handler instead, something like (formerly live() or delegate())

$('#videoInfo').on('click', 'h6.btnComments', function(e){
...