how to detect an event bind to an element with jquery

Question

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.

Possible duplicate of stackoverflow.com/questions/2008592/… — gotohales
– gotohales, Commented Dec 15, 2012 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
– charlietfl, Commented Dec 15, 2012 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
– alexserver, Commented Dec 16, 2012 at 2: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
– alexserver, Commented Dec 16, 2012 at 2:32

Cooper Maruyama · Accepted Answer · 2014-03-11 05:49:23Z

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/

edited Mar 11, 2014 at 5:49

answered Dec 15, 2012 at 23:41

Cooper Maruyama

1,63215 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alexserver Over a year ago

your approach seems to be the most near to the solution, by walking around the events and find in $._data thanks for your time.

Cooper Maruyama Over a year ago

@alexserver would you mind marking this correct so others can see it's been answered? thanks

micha · Accepted Answer · 2012-12-15 22:59:27Z

0

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

answered Dec 15, 2012 at 22:59

micha

49.9k16 gold badges75 silver badges80 bronze badges

1 Comment

alexserver Over a year ago

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.

charlietfl · Accepted Answer · 2012-12-15 23:06:54Z

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

answered Dec 15, 2012 at 23:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

alexserver Over a year ago

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

charlietfl Over a year ago

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

alexserver · Accepted Answer · 2012-12-16 05:09:22Z

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.

Collectives™ on Stack Overflow

how to detect an event bind to an element with jquery

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related