jQuery - 动态触发器无法正常工作

Question

这是其中一个阻止错误的工作，然后它不起作用，并且不通过Firebug提供任何调试提示。

我有一个“媒体室”页面，允许用户查看YouTube视频，如果有会员，则对该视频发表评论。当我加载触发器时，.on（'click'...）触发器按预期工作。但是，如果用户选择另一个视频，则使用.empty（）并替换触发器。在动态添加之后，它不再生成警报。

页面可以在开发服务器上看到http://dev.edrtrust.com/play/index.php/media/media_room，我说的触发器是视频正上方的“评论（0）”。

的HTML/jQuery代码包含：

<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 

最后，通过AJAX，我更换时，选择一个新的视频上面的内容（这是没有按” t工作）

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 

任何和所有的帮助表示赞赏。

Answer 1

您正在使用直接事件处理程序，但需要委托一个（检查jQuery的.on() documentation了解详细信息） 处理程序直接绑定到$('h6.btnComments')，但内容替换此对象及其所有事件都会被移除后。尝试使用委派事件处理程序，而不是，像（原生活（）或委托（））

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