Develop Reference

EventListener click function firing multiple times after initialize again during infinite scroll

This is my first question, so i try to describe it precisely as possible and follow the stackoverflow guideline "How do I ask a good question?"
My Problem:
Im using the "old but gold" infinite-scroll jQuery plugin to load the next posts on a wordpress site. Im also using the lazyframe plugin to load youtube videos "lazy" with a click on the play button of a video. To ensure the lazyframe function after loading a set of new posts with the infinte scroll function, im initializing the lazyframe in the following way with adding the lazyframe('.lazyframe'); initializing code to the function(newElements) part of the infinite-scroll js:
//infinite scroll
if ($masonry.length && obj_testsite.infinitescroll != 'disable') {
nextSelector = obj_testsite.nextselector;
if (document.URL.indexOf('/source/') != -1) {
nextSelector = '#navigation #navigation-next a';
}
$masonry.infinitescroll({
navSelector : '#navigation',
nextSelector : nextSelector,
itemSelector : '.thumb',
prefill: true,
bufferPx : 500,
loading: {
msgText: '', // load spinner icon instead of gif images - see below
finishedMsg: obj_testsite.__allitemsloaded,
img: '',
finished: function() {}
}
}, function(newElements) {
lazyframe('.lazyframe');
var $newElems = $(newElements);
$('#infscr-loading').fadeOut('normal');
$masonry.masonry('appended', $newElems, true);
});
}
So far, this works fine. BUT, when i scroll down and load a few set of posts with infinite-scroll and then click the the play button sometimes the lazyframe plugin creates multiple youtube iframes.
My research so far showed me, that the reason why the event is firing multiple times is, because the event is attached to the element multiple times. The following code shows the part where the lazyframe plugin uses the addEventListener function to target an element in a document:
function n(e) {
if (e instanceof HTMLElement != !1) {
var t = {
el: e,
settings: i(e)
};
t.el.addEventListener("click", function() {
return t.el.appendChild(t.iframe)
}), d.videolazyload ? l(t) : s(t, !!t.settings.thumbnail)
}
}
Any idea how to solve this problem? I tried to stop the event propagation, but i was not able to fix it because of lack of knowledge. Any help would be appreciated.

Plugin author here. Thanks for using it!
There was a bug in the plugin that would attach multiple event listeners on the element/elements upon reinitialization. That's sorted in v1.1.1 so just update the plugin and it should work.

You use event capturing in your eventListener. Actually, not all browsers support event capturing (for example, Internet Explorer versions less than 9 don't) but all do support event bubbling, which is why it is the phase used to bind handlers to events in all cross-browser abstractions, jQuery's included.
The nearest to what you are looking for in jQuery is using on().
So you can change your code to this (event):
$(t.el).off('click').on('click', function() {
return t.el.appendChild(t.iframe)
});
off() function remove event listener (in our case 'click') on element that you specified, so you can try this solution.

Prevent child event from firing

I have a slider that I am currently making. I am making slow progress, but I am making progress nonetheless!
Currently I have this:
http://codepen.io/r3plica/pen/mEKyGG?editors=1011#0
There are 2 things you can do with this control, the first thing is you can drag left or right. The second thing you can do is click a "point" and it will scroll to the center.
The problem I have is that if I start dragging from a point, when I let go it will invoke the moveToCenter method.
I have tried to prevent this by adding
// Stop from accessing any child events
e.preventDefault();
e.stopPropagation();
to the end of the dragEventHandler, but this did not work.
I also have 2 boolean values options.drag and options.start. I though I might be able to use them somehow (if the drag has started and is enabled then don't perform the moveToCenter but this didn't work either.
Do anyone have any idea how to get this to work?

Maybe this will help. You can register your events in bubbling or capturing mode, using addEventListener method. It defines orders of processing your events - child -> parent (bubbling), or vice versa (capturing).
http://www.quirksmode.org/js/events_advanced.html
So, if you use addEventListener(event, handler, true), it will use capturing event mode.
Codepen:
http://codepen.io/anon/pen/bZKdqV?editors=1011
divs.forEach(function (div) {
div.addEventListener('click', function(e) {
e.stopPropagation();
console.log('parent');
}, true);
});
Be aware of browser support (IE9+). All modern browsers - yes, of course.
http://caniuse.com/#search=addeventlistener
Update
So it turned out to be easier than first approach. (no need for capturing)
Check out codepen:
http://codepen.io/anon/pen/QExjzV?editors=1010
Changes from your sample:
At the beginning of moveToCenter: function(e, options, animate) function
if (options.started) {
return;
}
In if (['mouseup', 'mouseleave'].indexOf(e.type) > -1):
setTimeout(function() {
options.started = false;
} , 100);
instead of
options.started = false;
Hope this helps.

Doubletap event on input text on mobile [duplicate]

I'm looking for the best solution to adding both "doubletap" and "longtap" events for use with jQuery's live(), bind() and trigger(). I rolled my own quick solution, but it's a little buggy. Does anyone have plugins they would recommend, or implentations of their own they'd like to share?

It has been reported to jQuery as a bug, but as doubletapping isn't the same as doubleclicking, it does not have a high priority. However, mastermind Raul Sanchez coded a jquery solution for doubletap which you can probably use!
Here's the link, works on mobile Safari.
It's easy to use:
$('selector').doubletap(function() {});
-edit-
And there's a longtap plugin here! You can see a demo on your iPad or iPhone here.

rsplak's answer is good. I checked out that link and it does work well.
However, it only implements a doubletap jQuery function
I needed a custom doubletap event that I could bind/delegate to. i.e.
$('.myelement').bind('doubletap', function(event){
//...
});
This is more important if you're writing a backbone.js style app, where there is a lot of event binding going on.
So I took Raul Sanchez's work, and turned it into a "jQuery special event".
Have a look here: https://gist.github.com/1652946 Might be useful to someone.

Just use a multitouch JavaScript library like Hammer.js. Then you can write code like:
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // Also fires on double click
// Generate a pony
})
.bind('hold', function(e) {
// Generate a unicorn
});
It supports tap, double tap, swipe, hold, transform (i.e., pinch) and drag. The touch events also fire when equivalent mouse actions happen, so you don't need to write two sets of event handlers. Oh, and you need the jQuery plugin if you want to be able to write in the jQueryish way as I did.
I wrote a very similar answer to this question because it's also very popular but not very well answered.

You can also use jQuery Finger which also supports event delegation:
For longtap:
// direct event
$('selector').on('press', function() { /* handle event */ });
// delegated event
$('ancestor').on('press', 'selector', function() { /* handle event */ });
For double tap:
// direct event
$('selector').on('doubletap', function() { /* handle event */ });
// delegated event
$('ancestor').on('doubletap', 'selector', function() { /* handle event */ });

Here's a pretty basic outline of a function you can extend upon for the longtap:
$('#myDiv').mousedown(function() {
var d = new Date;
a = d.getTime();
});
$('#myDiv').mouseup(function() {
var d = new Date;
b = d.getTime();
if (b-a > 500) {
alert('This has been a longtouch!');
}
});
The length of time can be defined by the if block in the mouseup function. This probably could be beefed up upon a good deal. I have a jsFiddle set up for those who want to play with it.
EDIT: I just realized that this depends on mousedown and mouseup being fired with finger touches. If that isn't the case, then substitute whatever the appropriate method is... I'm not that familiar with mobile development.

based on latest jquery docs i've written doubletap event
https://gist.github.com/attenzione/7098476

function itemTapEvent(event) {
if (event.type == 'touchend') {
var lastTouch = $(this).data('lastTouch') || {lastTime: 0},
now = event.timeStamp,
delta = now - lastTouch.lastTime;
if ( delta > 20 && delta < 250 ) {
if (lastTouch.timerEv)
clearTimeout(lastTouch.timerEv);
return;
} else
$(this).data('lastTouch', {lastTime: now});
$(this).data('lastTouch')['timerEv'] = setTimeout(function() {
$(this).trigger('touchend');
}, 250);
}
}
$('selector').bind('touchend', itemTapEvent);

jQuery click event not firing custom event handler

I use a jQuery library that dynamically creates a link with a click event like:
$parent.append('<div class="add-row">Add another contact</div>');
addButton = $parent.find("div:last a");
addButton.click(function(e){
e.preventDefault();
load_contact_creation_form();
});
I want to add some code to my page so when the URL contains a specific flag, the addButton.click event is fired automatically.
Inspecting with the Firefox/Chrome debug tool, I can easily find the link with:
$('.add-row a')
However, attempting to using $('.add-row a').click() to click it does not trigger the custom 'click' event.
Why is there a disparity between .click() and a real mouse-click? How do I trigger the custom click event handler in this case? The code that generates the link is an external library, so I can't easily modify it.

It seems to work as expected for me. Check this fiddle : http://jsfiddle.net/d3s8topL/
$("#addDiv").click(function (){
$("#test").append('<div class="add-row">Add another contact</div>');
var addButton = $("#test").find("div:last a");
addButton.click(function(e){
e.preventDefault();
alert("asdasd");
});
});
$("#triggerClick").click(function () {
$(".add-row a").click();
});

You need a MutationOberserver but,Mutation Observer API is only available in newer versions of Google Chrome (>= 18) and Mozillza Firefox (>= 14). So you could use a jQuery plugin for that. Using the plugin, you could do
$('.add-row').observe("childlist", "a", function(){
$(this).click(); // trigger
});

Enable and disable jquery knob dynamically

I'm using the excellent jQuery knob plugin. However, I need to dynamically enable/disable the element depending on user input. There is support for having a disabled state on page load which have the effect that no mouse (or touch) events are bound to the canvas element. Does anyone know how to resolve this issue, that is, how to (after page load) bind and unbind these mouse event listeners?
Ideally I would like to do something like this (on a disabled knob)
$('.button').click(function() {
$('.knob').enable();
});
Edit:
I ended up rewriting the source which binds/unbinds the mouse and touch events. The solution is not perfect so I leave the question open if someone perhaps have a better (cleaner) solution.

html
<input class="knobSlider" data-readOnly="true">
<button id="testBtn">clickHere</button>
script
in doc ready,
$(".knobSlider").knob();
$("#testBtn").click(function(){
$(".knobSlider").siblings("canvas").remove();
if($(".knobSlider").attr("data-readOnly")=='true'){
$(".knobSlider").unwrap().removeAttr("data-readOnly readonly").data("kontroled","").data("readonly",false).knob();
}
else{
$(".knobSlider").unwrap().attr("data-readOnly",true).data("kontroled","").data("readonly",true).knob();
}
});
For reference you can use my jsfiddle link > http://jsfiddle.net/EG4QM/ (check this in firefox, because of some external resource load problem in chrome)

If someone doesn't like how the accepted answer destroys and recreates the internal canvas element, then checkout my approach:
https://jsfiddle.net/604kj5g5/1/
Essentially, check the draw() implementation (I also recommend listening on value changes in the draw method instead of the change and release, which work for and click and mousewheel events respectively, which imo is inconvenient).
var $input = $("input");
var knobEnabled = true;
var knobPreviousValue = $input.val();
$input.knob({
draw: function () {
if (knobPreviousValue === $input.val()) {
return;
}
if (!knobEnabled) {
$input.val(knobPreviousValue).trigger("change");
return;
}
knobPreviousValue = $input.val();
console.log($input.val());
},
});

Try this to disable the control.
I'm still trying to find a way to enable it back
$("#btnDisable").click(function(){
$("#knob").off().prev().off();
});