jquery混淆 - 爲什麼我的超級鏈接停止工作

Question

我發現某人使用jquery的投票系統，並希望將其合併到我的網站。不幸的是，我希望它檢測用戶是否已經投票並基於此顯示投票或投票按鈕（和鏈接）。

它工作正常 - 除了當我動態改變投票按鈕，即。如果我將一個項目投下來，我將圖標更改爲投票，但是當我單擊投票圖標時，超鏈接操作不會被觸發。我需要做些什麼來「將其重新接線」？注意：我剛剛在投票中實現了這個邏輯，我沒有改變投票方式，所以它現在清除了投票按鈕。這將被修復。

如果知道這很重要 - 這是在.net/mvc應用程序中。

<script type="text/javascript"> 
     $(document).ready(function() { 

      function onChange(newPageValue) { 
       UpdateStories(newPageValue); 
      } 

      $(function() { 
      $("a.vote_up").click(function() { 
       //get the id 
       var theId = $(this).attr('id').replace('vote_', ''); 

       // show the spinner 
       $(this).parent().html("<img src='content/images/spinner.gif'/>"); 

       //fadeout the vote-count 
       $("span#votes_count_" + theId).fadeOut("fast"); 

       //the main ajax request 
       $.ajax({ 
        type: "POST", 
        data: { action: "vote_up", id: $(this).attr("id")}, 
        url: "@Url.Action("ProcessVote", "Vote")", 
        success: function(msg) { 
         $("span#votes_count_" + theId).html(msg); 
         // fadein the vote count 
         $("span#votes_count_" + theId).fadeIn(); 
         // remove the spinner 
         $("span#vote_buttons_" + theId).html(''); 
        } 
       }); 

      }); 
     }); 

     $(function() { 
      $("a.vote_down").click(function() { 
       //get the id 
       var theId = $(this).attr('id').replace('vote_', ''); 

       // show the spinner 
       $(this).parent().html("<img src='content/images/spinner.gif'/>"); 

       //fadeout the vote-count 
       $("span#votes_count_" + theId).fadeOut("fast"); 

       //the main ajax request 
       $.ajax({ 
        type: "POST", 
        data: { action: "vote_down", id: $(this).attr("id")}, 
        url: "@Url.Action("ProcessVote", "Vote")", 
        success: function(msg) { 
         $("span#votes_count_" + theId).html(msg); 
         // fadein the vote count 
         $("span#votes_count_" + theId).fadeIn(); 
         // remove the spinner 
         var votelink = "<a href='javascript:;' class='vote_up' id='vote_" + theId + "'></a>"; 
         $("span#vote_buttons_" + theId).html(votelink); 
        } 
       }); 

      }); 
     }); 

}); 
    </script> 

的HTML/MVC認爲引用這個部分是：

@foreach (var story in Model.UserStories) 
     { 
      <tr> 
       <td>@story["FormattedID"] 
       </td> 
       <td>@story["Name"] 
       </td> 
       <td>@Html.Raw(story["Description"]) 
       </td> 
       <td>@story["TaskEstimateTotal"] 
       </td> 
       <td> 
        <span class='votes_count' id='votes_count_@story["FormattedID"]'>@story["VoteCount"]</span> votes 
    <br/> 
        <span class='vote_buttons' id='vote_buttons_@story["FormattedID"]'> 
         @if (story["Voted"]) 
         { 
          <a href='javascript:;' class='vote_down' id='vote_@story["FormattedID"]'></a> 
         } 
         else 
         { 
          <a href='javascript:;' class='vote_up' id='vote_@story["FormattedID"]'></a> 
         } 
        </span> 

       </td> 
      </tr> 
     } 

所以我的邏輯正常工作正常 - 除了當我動態地把投票按鈕到HTML佔位符，那麼它不再觸發它需要的事件。

編輯 - 我曾嘗試移動文檔就緒功能之外的功能，但這並沒有解決問題。

Answer 1

此，如果你想確保動態元素都包括在內，是利用on只會頁面

$("a.vote_up").click(function() { 

你應該做的事情上註冊與當前元素click事件。

$("body").on("click",'a.vote_up',function(){ 

它將使用類vote_up將此事件委託給所有當前和將來的錨元素。