AJAX調用後重新激活點擊事件

我做了一個網頁，當用戶在隨機鏈接（href）上點擊了兩次以上時，通過Ajax動態獲取新數據。每一次點擊，我需要檢測點擊按鈕的ID。這是由該位的代碼完成：AJAX調用後重新激活點擊事件

$(document).on("click", ".buttonsMainpage", function(event) { 
     numberOfClicks += 1; 
     idOfWebsite = event.target.id || this.event.srcElement;

現在的問題時，我已經做了兩個以上的點擊和我的Ajax功能刷新我的DIV的含量上升。不知怎的，每次

function haallinks() { 
    $.ajax({type: "GET", 
     async: false, 
     url: site_url + "/index/readWebsiteLinks", 
     data: {id: $('#categorieId').val()}, 
     success: function(result) { 
      $("#resultaat").html(result); 
      $('#resultaat').bind('click'); 
     } 
    }); 
}

我的阿賈克斯獲得新數據，並把它放在我的div（#resultaat）我無法檢測到我的ID了：這是通過這個功能來完成。事不宜遲，這是我完整的代碼，這樣你就可以看到全貌：

<script type="text/javascript"> 
    var focusedOrNot = 2; 
    var idOfWebsite; 
    var bothEventsOrOne = 0; 
    var numberOfClicks = 0; 
    function haallinks() { 
     $.ajax({type: "GET", 
      async: false, 
      url: site_url + "/index/readWebsiteLinks", 
      data: {id: $('#categorieId').val()}, 
      success: function(result) { 
       $("#resultaat").html(result); 
       $('#resultaat').bind('click'); 
      } 
     }); 
    } 

    function websiteTellerVerhogenInDb() { 
     $.ajax({type: "POST", 
      url: site_url + "/index/websiteCount", 
      data: {id: idOfWebsite} 
     }); 
    } 

    function styleSwitcher() { 
     var cId = $('#categorieId').val(); 
     if (cId == 3) 
      $("link[kleur=true]").attr("href", thema_url + "red.css"); 
     if (cId == 0) 
      $("link[kleur=true]").attr("href", thema_url + "purple.css"); 
    } 


    $(document).ready(function() { 
     $("#categorieId").change(function() { 
      haallinks(); 
      styleSwitcher(); 
      $('#resultaat').fadeOut(1000).fadeIn(1000); 
      showTextMessage(); 
     }) 
    }); 


    $(document).on("click", ".buttonsMainpage", function(event) { 
     numberOfClicks += 1; 
     idOfWebsite = event.target.id || this.event.srcElement; 
     alert(idOfWebsite); 
     websiteTellerVerhogenInDb(); 
     if (numberOfClicks >= 2) 
     { 
      haallinks(); 
      setTimeout(function() { 
       userOnWebsiteOrNot(); 
      }, 2000); 
      numberOfClicks = 0; 
     } 
    }); 

    function userOnWebsiteOrNot() 
    { 
     if (focusedOrNot === 0) 
     { 
      $('#resultaat').fadeOut(1000).fadeIn(1000); 
      showTextMessage(); 
     } 
     else 
     { 
      controlerenActiefOfNiet(); 
      window.setTimeout(function() { 
      }, 3000) 
     } 
    } 

    function controlerenActiefOfNiet() 
    { 
     setTimeout(function() { 
      userOnWebsiteOrNot(); 
     }, 2000); 
    } 

    window.addEventListener('focus', function() { 
     setTimeout(function() { 
      document.title = 'focused'; 
      focusedOrNot = 0; 
     }, 300); 
    }); 


    window.addEventListener('blur', function() { 
     setTimeout(function() { 
      document.title = 'not focused'; 
      focusedOrNot = 1; 
     }, 300); 
    }); 

    function showTextMessage() 
    { 
     setTimeout(function() { 
      if (bothEventsOrOne == 0) 
      { 
       $('#tekstNewButtons').html('<h3>You have new buttons!<h3> ').fadeIn(3000).slideUp(3000).fadeOut(3000); 
       bothEventsOrOne += 1; 
      } 
      else 
      { 
       $('#tekstNewButtons').html('<h3>You have new buttons!<h3> ').slideDown(0).slideUp(3000).fadeOut(3000); 
      } 
     }, 1000); 
    } 
</script>

的HTML/PHP的一部分：

<div id="resultaat"> 
    <table> 
     <tr> 
      <?php 
      for ($teller = 1; $teller < 21; $teller++) { 
       $website = $websites[$teller]; 
       echo "<td><a class=\"buttonsMainpage\" href=\"$website->websitelink\" target='_blank' id=\"$website->id\"></a></td>"; 
       if ($teller % 5 == 0 && $teller > 0 && $teller < 20) { 
        echo "</tr><tr>"; 
       } 
      } 
      ?> 
     </tr> 
    </table> 
</div>

短版：我每次點擊的按鈕div #resultaat因爲id = \「$ website-> id \」>我可以得到它的ID，但是當我的AJAX爲我的div #resultaat獲得新數據時，click事件不能再檢測到這些ID。有沒有人有任何線索如何解決這個或有沒有人有一個想法？

謝謝 Yenthe

來源

2013-07-20 Yenthe

有一件事，你爲什麼不使用'dblclick'事件？雙擊時觸發。 – Shawn31313

因爲我的按鈕只需點擊一下，我需要它來監控一次點擊，所以dblclick事件對我來說將毫無用處 – Yenthe

噢好吧。在你的AJAX函數中，你不能嘗試刪除：'$（'＃resultaat'）。bind（'click'）;' – Shawn31313

你可以嘗試：

$("body").on("click", ".buttonsMainpage", function(event) { 
    numberOfClicks += 1; 
    idOfWebsite = event.target.id || this.event.srcElement; 
    console.log(idOfWebsite); 
});

還刪除$('#resultaat').bind('click');在阿賈克斯的成功，因爲它沒有做任何有用的東西。

如果您不想跟蹤.buttonsMainpage正文的任何其他位置，只要該元素不是動態的，只要在click事件的選擇器上儘可能具體即可。如果該鏈接僅存在於#resultaat div中，它甚至可能是$("#resultaat").on("click", ...。

來源

2013-07-20 18:53:22

AJAX調用後重新激活點擊事件

回答

相關問題