1

this is what i want to do:

I have many anchors in a webpage, some are managed with ajax since they are binded to a click event with jquery; some are not so they are sending to another page via regular http request.

<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>

Please don't respond regard to anchor clases, like 'hey select all anchors that don't have "blabla" class'. I'm doing this because i'm triying to put a "waiting" label over the page for every anchor that is not been managed via ajax. I want to know if an anchor has a click event binded to itself.

Regards.

alexserver
  • 1,348
  • 3
  • 15
  • 30
  • 1
    Possible duplicate of http://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery – gotohales Dec 15 '12 at 22:58
  • there are likely methods to do what you need that don't require investigating events bound. What is higher level objective? Your explanation is not very concise – charlietfl Dec 15 '12 at 23:03
  • this is a website where are some anchors with remote behavior, and some without it. so i want to catch the ones that don't have remote behavior, in order to replace body with an image while the request is loading. – alexserver Dec 16 '12 at 02:19
  • @mookamafoob in deed this is most the same i was looking for, thanks y din'd see it and i did my homework searching among the posts before post my question. Thanks. – alexserver Dec 16 '12 at 02:32

4 Answers4

1

This works - the idea is:

  • Store how many click events exist for each <a> element in an array when the page initially loads.

  • Then, every 500ms or so, compare the length of click events on each anchor to the length you stored in the array

-

$(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);
            }
        }
    });
  }
});​

Demo: http://fiddle.jshell.net/CyYbA/20/show/

Try pulling up console and binding something to the $('#test') object

edit fiddle here: http://jsfiddle.net/CyYbA/20/

Cooper Maruyama
  • 1,572
  • 13
  • 31
0

Maybe you can use the jquery data function to store the additional information for those anchors?

micha
  • 47,774
  • 16
  • 73
  • 80
  • i cannot store, i must retrieve, there are a lot of anchors in the website and i have to deal with both ajax and non-ajax in this. – alexserver Dec 16 '12 at 02:30
0

If your url system for AJAX always includes ajax in the path you can build a selector based on href

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

      return ! /ajax/.test(this.href);
})
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • thanks but that's the way i cannot proceed, i have not control for the urls since this is a page that i din't code and there are many anchors... – alexserver Dec 16 '12 at 02:28
  • OK.. well you have only given a very basic overview of your issue. There are likely other avenues to explore but not without details. As example you haven't identified why finding events helps, or identified any parameters that would help identify ajaxabale links – charlietfl Dec 16 '12 at 02:35
0

ok, this is what i have so far:

<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>

some jquery events binding

$('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;
});

i have many anchors, one without ajax and the else ones with a different ajax call so that's what i'm expecting to find in the page. my code have to catch all of them and evaluate which one has not an ajax call to treat it diferent

here's the code.

//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...
                 }
            }
        }
    }
});

hope this help another guy with the same problem i had. regards.

alexserver
  • 1,348
  • 3
  • 15
  • 30