We Keep Coding

Bind custom event to dynamic created elements

I've been binding events to dynamically created elements without any kind of issues by using:
$(document).on(event, element, function)
Now I want to bind a custom event and I just can´t get it to work.
The event is a JS plugin to handle single e double click. If I use it like this:
$('#test').oneordoubleclick({
oneclick: function () {
alert('you have clicked this node.');
},
dblclick: function () {
alert('you have double clicked this node.');
}
});
It works like a charm, but, as I transform the code to bind the event to dynamically created elements, like this:
$(document).on('oneordoubleclick', '#test', {
oneclick: function () {
alert('you have clicked this node.');
},
dblclick: function () {
alert('you have double clicked this node.');
}
});
It stops working!
It wasn't supposed to work? What am i doing wrong? It is possible to do what i want to accomplish?

According to my understanding, .oneordoubleclick is not an Event, just like .footable or .tooltip. Therefore, you cannot put it in $(document).on("oneordoubleclick","#test", ...)
Here's my solution, with the aid of the plugin source code:
// Custom functions
let singleClick = function () { // your function when is single click
alert('you have clicked this node.');
}
let doubleClick = function () { // your function when is double click
alert('you have double clicked this node.');
}
// Necessary to differentiate is single or double click
let timer,
do_click = function (e, fx) {
clearTimeout(timer);
timer = setTimeout(function () {
fx();
}, 400); // if there is no another click between 0.4s, then it is single click
},
do_dblclick = function (e, fx) {
clearTimeout(timer); // the single click function will not be called
fx();
};
// Listener
$(document) .on("click", "#test", function (e) { do_click(e, singleClick) })
.on("dblclick", "#test", function (e) { do_dblclick(e, doubleClick) })
Correct me if I'm wrong.

In addition to the correct answer, i needed to know which DOM element was responsible for the call. To achieve that i changed a little bit XH栩恒 answer code...
// Necessary to differentiate is single or double click
let timer,
do_click = function (e, fx, element) {
clearTimeout(timer);
timer = setTimeout(function () {
fx(element);
}, 400); // if there is no another click between 0.4s, then it is single click
},
do_dblclick = function (e, fx, element) {
clearTimeout(timer); // the single click function will not be called
fx(element);
};
// Listener
$(document).on("click", ".teste", function (e) {
do_click(e, singleClick, $(this))
})
.on("dblclick", ".teste", function (e) {
do_dblclick(e, doubleClick, $(this))
})
let singleClick = function (element) { // your function when is single click
console.log(element)
}
let doubleClick = function (element) { // your function when is double click
console.log(element)
}

stopPropagation when click on a certain div

I have a div who can be displayed or not. When it's display I want to pass display to none if you click somewhere not in that div. So what I did is :
document.addEventListener('click',closeDiv)
document.getElementById('myDiv').addEventListener('click',stopPropagation)
function closeDiv(){
let div = document.getElementById('myDiv')
div.style.display='none'
}
But with that even if I click on the div, the display goes to none

Found the solution :
document.addEventListener('click',closeModal)
document.getElementById('myDiv').addEventListener('click',stopPropagation)
function stopPropagation(e){
e.stopPropagation();
}
function closeDiv(){
let div = document.getElementById('myDiv')
div.style.display='none'
}

If you make an window.addEventListener('click', outDiv);
and this function :
let myDiv = document.querySelector('myDiv');
function outDiv (event) {
if (!myDiv.classList.contain(event.target)) {
// Make Something
}
}

OnClick propagation when generating divs with jQuery

I am not sure why the event StopPropagation technique is not working with this simple onClick example - the event seems to be bubbling up the DOM tree and is also iterating exponentially every time I click again.
I think this is because I generate html with a javascript function, and I'd be very eager to hear why you think this isn't working as expected.
EDIT: I have created a jsFiddle at http://jsfiddle.net/Guill84/GsLtN/22/. The issue becomes very clear. If I click on 'Text1' the first time, the alert pop-up comes up only once. If I click it again, it then comes up twice. If I click it again, it comes up three times, and so on. How can I amend the script so that it is run only once? This is driving me barmy.
HTML
<body>
<div id='container'>
<div id='1'>Text1</div>
<div id='2'>Text2</div>
</div>
</body>
Javascript
$(function notice_it(declim) {
if ($.isNumeric(declim)) {
//stuff
} else {
declim = 10;
}
$("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
alert(declim);
$('body').on('click', '#1', function (event) {
event.stopPropagation();
var declim = 10 - 1;
notice_it(declim);
});
$('body').on('click', '#2', function (event) {
event.stopPropagation();
var declim = 10 + 1;
notice_it(declim);
});
$('body').on('click', 'body', function (e) {
e.stopPropagation();
});
});

I have already added comment but then I thought this would explain in a better way.
Issue
$(function notice_it(declim) {
if ($.isNumeric(declim)) {
//stuff
} else {
declim = 10;
}
$("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
alert(declim);
$('body').on('click', '#1', function (event) {
event.stopPropagation();
var declim = 10 - 1;
notice_it(declim); // Issue
});
});
Here notice_it() is used to initialize events and it is called again in event handlers. Following is an updated JSFiddle - Issues showing different registered events.
Solution
A simple solution would be to migrate the code used to notify to a separate function, as done in following JSFiddle - Solution1.
A better way to implement though would be like this: JSFiddle - Solution2. It is somewhat Declarative Programming and makes it very easy for another person to understand.

Calling return false should work in your scenario.

$(function notice_it(declim) {
if ($.isNumeric(declim)) {
//stuff
} else {
declim = 10;
}
$("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
alert(declim);
$('body').on('click', '#1', function (event) {
return false;
var declim = 10 - 1;
notice_it(declim);
});
$('body').on('click', '#2', function (event) {
return false;
var declim = 10 + 1;
notice_it(declim);
});
$('body').on('click', 'body', function (e) {
e.stopPropagation();
});
});
Try to return false on click

How to close div when div loses focus?

I made a simple plunkr here http://plnkr.co/edit/zNb65ErYH5HXgAQPOSM0?p=preview
I created a little datepicker I would like this to close itself when you focus out of it (focusout of datepicker) if I put blur on input I'm unable to use the datepicker, if I put focusout event on datepicker it doesn't works
I also tried:
angular.element(theCalendar).bind('blur', function () {
$scope.hideCalendar();
});
but it doesn't work.
Any clue?

this is because you are removing the item before you get a chance to do anything, here is a working example:
http://plnkr.co/edit/mDfV9NLAQCP4l7wHdlfi?p=preview
just add a timeout:
thisInput.bind('blur', function () {
$timeout(function(){
$scope.hideCalendar();
}, 200);
});
have you considered using existing datepickers? like angularUI or angular-strap: http://mgcrea.github.io/angular-strap/##datepickers
Update:
Not a complete solution, but should get you quite closer:
angular.element($document[0].body).bind('click', function(e){
console.log(angular.element(e.target), e.target.nodeName)
var classNamed = angular.element(e.target).attr('class');
var inThing = (classNamed.indexOf('datepicker-calendar') > -1);
if (inThing || e.target.nodeName === "INPUT") {
console.log('in');
} else {
console.log('out');
$timeout(function(){
$scope.hideCalendar();
}, 200);
}
});
http://plnkr.co/edit/EbQl5xsCnG837rAEhBZh?p=preview
What you want to do then is to listen for a click on the page, and if the click is outside of the calendar, then close it, otherwise do nothing. The above only takes into account that you are clicking on something that has a class name which includes datepicker-calendar, you will need to adjust it so that clicking within the calendar doesn't close it as well.

How about closing on mouseout?
You need to cancel the close if you move to another div in the calendar though:
//get the calendar as element
theCalendar = element[0].children[1];
// hide the calendar on mouseout
var closeCalendarTimeout = null;
angular.element(theCalendar).bind('mouseout', function () {
if ( closeCalendarTimeout !== null )
$timeout.cancel(closeCalendarTimeout);
closeCalendarTimeout = $timeout(function () {
$scope.hideCalendar();
},250)
});
angular.element(theCalendar).bind('mouseover', function () {
if ( closeCalendarTimeout === null ) return
$timeout.cancel(closeCalendarTimeout);
closeCalendarTimeout = null;
});
EDIT
Adding a tabindex attribute to a div causes it to fire focus and blur events.
, htmlTemplate = '<div class="datepicker-calendar" tabindex="0">' +
angular.element(theCalendar).bind('blur', function () {
$scope.hideCalendar();
});

So, i know it probably is not the best practice or the best way to do this, but at the end i fixed and got what i need using this:
thisInput.bind('focus click', function bindingFunction() {
isMouseOnInput = true;
$scope.showCalendar();
angular.element(theCalendar).triggerHandler('focus');
});
thisInput.bind('blur focusout', function bindingFunction() {
isMouseOnInput = false;
});
angular.element(theCalendar).bind('mouseenter', function () {
isMouseOn = true;
});
angular.element(theCalendar).bind('mouseleave', function () {
isMouseOn = false;
});
angular.element($window).bind('click', function () {
if (!isMouseOn && !isMouseOnInput) {
$scope.hideCalendar();
}
});
I setted up some boolean vars to check where mouse is when you click the page and it works like a charm if you have some better solution that works , please let me know, but this actually fixed all.
I accept this as the answer but i thank all the guys on this page!

Why can't I get the exact element I'm hovering over?

Let me start off by saying I'm no jQuery expert. However, I have code (included below) that will grab the element I hover over. The problem I have is if I have the following structure, inside my <div id="literalContent">:
<div>
<table>
<tr>
<td>
<div>
And I hover over the final <div>, I see the border and That's awesome. However, if I then want to select the parent table, it is not selected. Any thoughts on my silly problem would be great.
$(function () {
$('#literalContent').find("*").hover(
function () {
$('[class="SelectedItem"]').removeAttr("class");
$(this).fadeIn(500, function () {
$(this).addClass("SelectedItem");
})
//$(this).addClass("SelectedItem");
//$('#controllabel').html('hovering ' + $(this).prop("tagName"));
},
function () {
if ($(this).attr('class') == "SelectedItem") {
$(this).removeAttr("class");
}
else {
$(this).removeClass("SelectedItem");
}
});
}
);

To highlight only the target (and not any of its ancestors), you can toggle a class on the target's immediate parent on mouseenter/mouseleave.
http://jsfiddle.net/kU3Ba/1/
$('#outer').find('*').hover(
function (e) {
var o = $(e.currentTarget),
par = o.parent();
o.addClass('redBorder');
if(par[0].id != "outer"){ // exclude "outer", since it is the wrapper
par.addClass('hideBorder'); // parent still has "redBorder" class
// "hideBorder" just hides it
}
console.log(e.currentTarget.id+" has focus");
},
function (e) {
var o = $(e.currentTarget),
par = o.parent();
o.removeClass('redBorder');
par.removeClass('hideBorder');
if(par[0].id != "outer"){ // exclude "outer", since it is the wrapper
console.log(par[0].id+" has focus");
}
});
This will visibly hide the border of immediate parent, and "return" the border once the mouse leaves its child.

It appears to be working here - http://jsfiddle.net/jayblanchard/ucM96/
$('#outer').find('*').hover(
function () {
$(this).addClass('redBorder');
},
function () {
$(this).removeClass('redBorder');
});
Note that selecting inner4 with the mouse causes the hover to be applied to inner3 as well - due to their relationship and how mouse events are handled.
You can be more specific by doing something like giving multiple selectors -
$('.foo, .bar').hover(
function (e) {
$(this).addClass('redBorder');
console.log(e.target.id);
},
function () {
$(this).removeClass('redBorder');
});