Asked  7 Months ago    Answers:  5   Viewed   49 times

I need to debug a web application that uses jQuery to do some fairly complex and messy DOM manipulation. At one point, some of the events that were bound to particular elements, are not fired and simply stop working.

If I had a capability to edit the application source, I would drill down and add a bunch of Firebug console.log() statements and comment/uncomment pieces of code to try to pinpoint the problem. But let's assume I cannot edit the application code and need to work entirely in Firefox using Firebug or similar tools.

Firebug is very good at letting me navigate and manipulate the DOM. So far, though, I have not been able to figure out how to do event debugging with Firebug. Specifically, I just want to see a list of event handlers bound to a particular element at a given time (using Firebug JavaScript breakpoints to trace the changes). But either Firebug does not have the capability to see bound events, or I'm too dumb to find it. :-)

Any recommendations or ideas? Ideally, I would just like to see and edit events bound to elements, similarly to how I can edit DOM today.

 Answers

71

See How to find event listeners on a DOM node.

In a nutshell, assuming at some point an event handler is attached to your element (eg): $('#foo').click(function() { console.log('clicked!') });

You inspect it like so:

  • jQuery 1.3.x

    var clickEvents = $('#foo').data("events").click;
    jQuery.each(clickEvents, function(key, value) {
      console.log(value) // prints "function() { console.log('clicked!') }"
    })
    
  • jQuery 1.4.x

    var clickEvents = $('#foo').data("events").click;
    jQuery.each(clickEvents, function(key, handlerObj) {
      console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
    })
    

See jQuery.fn.data (where jQuery stores your handler internally).

  • jQuery 1.8.x

    var clickEvents = $._data($('#foo')[0], "events").click;
    jQuery.each(clickEvents, function(key, handlerObj) {
      console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
    })
    
Tuesday, June 1, 2021
 
MoarCodePlz
answered 7 Months ago
96

Before inspecting examples, you should know two jQuery functions which i used most.

index() returns value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

eq() selects of an element based on its position (index value).

Basicly i take selected trigger element's index value and match this value on images with eq method.

- FadeIn / FadeOut effect.

- Sliding effect.

- alternate Mousewheel response.


?html sample:

<ul class="images">
   <li>
      <img src="images/1.jpg" alt="1" />
   </li>
   <li>
      <img src="images/2.jpg" alt="2" />
   </li>
   ...
</ul>

<ul class="triggers">
   <li>1</li>
   <li>2</li>
   ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

OPACITY EFFECT: jsFiddle.

css trick: overlapping images with position:absolute

ul.images { position:relative; }
  ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

SLIDING EFFECT: jsFiddle.

css trick: with double wrapper and use child as mask

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Common jQuery response for both slider:

( triggers + next/prev click and timing )

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

Tuesday, June 1, 2021
 
conmen
answered 7 Months ago
100

You are not using the correct code to get live functionality.

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});
  1. First, select your common ancestor element (#title-items in this example). You can use document here too if you want to handle all a elements.
  2. Pass the event type (on), then the sub selector (a), and then the callback function for the event.

Now, when click events bubble up to #title-items, it will check to see if the element is an a element, and if so, fire the callback.

Wednesday, June 30, 2021
 
khaverim
answered 5 Months ago
23

Step 1: Set up your watchers

Step 2: Load the dialog

Step 3: Figure out where the bounding rect is on the page and move the dialog.

canvas.observe('mouse:over', function (e) {
    console.log("Everyday I'm hovering");
    showImageTools(e.target);
});
canvas.observe('mouse:out', function (e) {
    $('#imageDialog').remove();
});
function showImageTools (e) {
    var url = 'dialog/imageDialog.htm';
    $.get(url, function(data) {
    // Don't add it twice
    if (!$('#imageDialog').length) {
        $(body).append(data);
    }
    moveImageTools();
});

function moveImageTools () {
    var w = $('#imageDialog').width();
    var h = $('#imageDialog').height();
    var e = canvas.getActiveObject();
    var coords = getObjPosition(e);
    // -1 because we want to be inside the selection body
    var top = coords.bottom - h - 1;
    var left = coords.right - w - 1;
    $('#imageDialog').show();
    $('#imageDialog').css({top: top, left: left});
}
function getObjPosition (e) {
    // Get dimensions of object
    var rect = e.getBoundingRect();
    // We have the bounding box for rect... Now to get the canvas position
    var offset = canvas.calcOffset();
    // Do the math - offset is from $(body)
    var bottom = offset._offset.top + rect.top + rect.height;
    var right = offset._offset.left + rect.left + rect.width;
    var left = offset._offset.left + rect.left;
    var top = offset._offset.top + rect.top;
    return {left: left, top: top, right: right, bottom: bottom};
}

That should be enough to get you started. Let me know if any of this doesn't make sense.

Thursday, September 23, 2021
 
mzereba
answered 2 Months ago
93

Try this way. event.stopPropagation does not stop the click event from firing after mousedown. Mousedown and click events are not related to each other.

var mousedownFired = false;

$("#id").on('mousedown', function(event) {
    mousedownFired = true;
    //code
});

$("#id").on('click', function(event) {
    if (mousedownFired) {
        mousedownFired = false;
        return;
    }
    //code
});

Update:

Mouse events are triggered like this:

  1. mousedown

  2. click

  3. mouseup

If mousedown is triggered, the mousedownFired variable will be set to true. Then in the click event, it will return (i.e. not continue processing the click event), and the mousedownFired variable will be reset to false, so future click events will fire normally. Not going to consider two mousedown or two click events.

Thursday, October 28, 2021
 
Columbo
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share