如何使用jquery檢測事件綁定到元素

Question

這就是我想做的：

我的網頁中有很多錨點，有些錨點是用ajax管理的，因為它們是通過jquery綁定到click事件的； 有些不是，所以他們通過常規的http請求發送到另一個頁面。

<a href="#/something" >something</a>
<a href="#/ajax/something" class="blabla">ajax something</a>

<script type="text/javascript">
    $(function(){
       $('.blabla').click(function(){
          //doing some ajax return false so anchor don't redirect
          return false;
       });
    });
</script>

請不要回應有關錨類的問題，例如“嘿，請選擇所有沒有“ blabla”類的錨”。 我這樣做是因為我試圖為未通過Ajax管理的每個錨在頁面上放置“等待”標簽。 我想知道錨點是否具有綁定到其自身的click事件。

問候。

Answer 1

這行得通-這個想法是：

• 最初加載頁面時，存儲數組中每個<a>元素存在多少click事件。

• 然后，每隔500毫秒左右，將每個錨點上的click事件的長度與您存儲在數組中的長度進行比較

-

$(function() {
  i = 0;
  window.ahrefEvents = [];
  $('a').each(function() { 
    $(this).attr('data-id', i); //give each anchor a unique id and save it the data-id attribute. we'll then save the number of events for each link in window.ahrefEvents
    window.ahrefEvents[i] = $._data($(this)[0], 'events') == undefined ? 0 : $._data($(this)[0], 'events')['click'].length; //if no events are bound it'll return undefined, so check for that and set it to 0 if that's the case
    i++;
});


window.setInterval(function() { //check every 500ms to see if that length changed
    checkEvents();
}, 500);

window.checkEvents = function() {
    $('a').each(function() {
        index = $(this).attr('data-id');
        if ($._data($(this)[0], 'events') != undefined) {
            if (window.ahrefEvents[index] != $._data($(this)[0], 'events')['click'].length) {
                //fires when length of click events on any anchor has changed
                console.log('event bound on anchor #' + index);
            }
        }
    });
  }
});​

演示： http : //fiddle.jshell.net/CyYbA/20/show/

嘗試拉起控制台並將某些東西綁定到$('#test')對象

在這里編輯小提琴： http : //jsfiddle.net/CyYbA/20/

Answer 2

也許您可以使用jquery 數據功能存儲這些錨點的其他信息？

Answer 3

如果您的AJAX網址系統始終在路徑中包含ajax ，則可以基於href建立選擇器

var $noAjaxLinks= $('a').filter(function(){

      return ! /ajax/.test(this.href);
})

Answer 4

好的，這是我到目前為止的內容：

<ul class="nav nav-list">
    <li><a href="content.php" class="load">content via .load()</a></li>
    <li><a href="content.php" class="get">content via $.get()</a></li>
    <li><a href="content.php" class="post">content via $.post()</a></li>
    <li><a href="content.php" class="ajax">content via $.ajax()</a></li>
    <li><a href="content.php" class="">content 2 without ajax()</a></li>
</ul>

一些jQuery事件綁定

$('a.load').click(function(){
    $("#container").loader().load($(this).attr('href'));
    return false;
});
$('a.get').click(function(){
    $.get($(this).attr('href'), function(d){
        $('#container').html(d);
    });
    return false;
});

我有很多錨，一個沒有ajax，另一個帶有不同的ajax調用，所以這就是我希望在頁面中找到的。 我的代碼必須捕獲所有這些代碼，並評估哪個代碼沒有ajax調用，以區別對待

這是代碼。

//looking just for one anchor
$('a').each(function(idx, obj){
    var events = $._data(this,'events');
    if (typeof events != "undefined" && "click" in events) {
        for (i in events.click) {
            if (typeof events.click[i].handler != "undefined") {
                 var f = events.click[i].handler.toString();
                 if ((/\$(\(.*\))?\.(load|ajax|get|post)\(/).exec(f)) {
                    console.log('obj '+$(this).text()+' : with ajax.');
                    //this is where i'm gonna deal with this regular http anchor...
                 }
            }
        }
    }
});

希望這可以幫助另一個遇到相同問題的人。 問候。