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调用后重新激活点击事件

回答

相关问题