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){ 
...