Develop Reference

OnClick not working when rendering React button on a custom dialog

I am a little bit lost hope someone with JS knowledge could help.
I am using this dialog: https://github.com/NBTSolutions/Leaflet.Dialog, on a leaflet map.
It is nothing much just opens a dialog on map when you call method like:
let dialog = L.control.dialog({
size: [300, 300],
anchor: [70, 0]
});
dialog.setContent("<div id='camera-view-container'></div>")
dialog.addTo(that.mymap); // adds dialog on the map
You can see in the content I deliberately put a div with some ID because later I have code:
ReactDOM.render(<button onClick={()=>{alert("test")}}>Test</button>, document.getElementById('camera-view-container'));
The thing is I can see the button on the dialog, however, the click handler doesn't work?
What can be causing this problem?
In which part of code should I look for solution?
Thanks
Very strangely if I:
Put the button inside a component and
Inside component render method I put:
<button className="buttons" ref={(save) => this.save = save}>Save</button>
And finally in componentDidMount of that component I do:
this.save.addEventListener("click", () => {alert("test")});
Then it works.
Why?

So here is the problem
When you put the button in leaflet dialog as content it is not in DOM until the dialog gets displayed. So you cannot target it until it appears (or loaded fully).
There are some builtin functions of how leaflet dialog behaviors when you show it
You must have set map element somewhere like -
var map = L.map('map').setView([42.8962176,-78.9247419], 12);
So you set the events when dialog is opened
map.on('dialog:opened', function(e){ console.log(e.target); //your content element });
You get the target as content. This is the way to go. You can try calling the method inside :opened callback.
For all instances of leaflet you can go in the view source
http://nbtsolutions.github.io/Leaflet.Dialog/
Here you will get set of methods
map.on('dialog:opened', function(e){ console.log("dialog opened event fired."); });
map.on('dialog:closed', function(e){ console.log("dialog closed event fired."); });
map.on('dialog:destroyed', function(e){ console.log("dialog destroyed event fired."); });
map.on('dialog:locked', function(e){ console.log("dialog locked event fired."); });
map.on('dialog:unlocked', function(e){ console.log("dialog unlocked event fired."); });
map.on('dialog:frozen', function(e){ console.log("dialog frozen event fired."); });
map.on('dialog:unfrozen', function(e){ console.log("dialog unfrozen event fired."); });
map.on('dialog:updated', function(e){ console.log("dialog updated event fired."); });
map.on('dialog:resizestart', function(e){ console.log("dialog resizestart event fired."); });
map.on('dialog:resizing', function(e){ console.log("dialog resizing event fired."); });
map.on('dialog:resizeend', function(e){ console.log("dialog resizeend event fired."); });
map.on('dialog:movestart', function(e){ console.log("dialog movestart event fired."); });
map.on('dialog:moving', function(e){ console.log("dialog moving event fired."); });
map.on('dialog:moveend', function(e){ console.log("dialog moveend event fired."); });
map.on('dialog:closehidden', function(e){ console.log("dialog closehidden event fired."); });
map.on('dialog:closeshown', function(e){ console.log("dialog closeshown event fired."); });
map.on('dialog:resizehidden', function(e){ console.log("dialog resizehidden event fired."); });
map.on('dialog:resizeshown', function(e){ console.log("dialog resizeshown event fired."); });

How to remove $(document).on click event?

Here is the code to add event
$(document).on({
click: function() {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
}
}, '.form-template-name');
For some conditions i dont want this event to trigger. So what I tried is
$('.form-template-name').off();
$('.form-template-name').unbind();
But nothing seems to work. Did I miss anything ?

You need to pass the event to unbind to .off(), also see the use of namepsaced event names
$(document).on({
'click.myevent': function () {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
}
}, '.form-template-name');
and
$(document).off('click.myevent', '.form-template-name');
Demo: Fiddle

Try this.
$(document).off('click', '.form-template-name');

An event handler is bound to an element. You can unbind an event handler from the element it is attached to, but you can't unbind it from a descendant element since that isn't where it is listening.
You can either:
Examine the target property of the event object (the first argument to your event handler function) to see what element was clicked on and then return before doing anything.
Bind a new event handler to the elements you want stop the event from triggering from and prevent the event from continuing up the DOM.

You can try with:
var clickEvent = function() {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
};
$(document).on({
click: clickEvent
}, '.form-template-name');
And unbind it with:
$(document).unbind('click', clickEvent);

Change your click handler to:
$(document).on({
'click.myevent': function () {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
}
}, '.form-template-name');
then you can use .off(), with name spaced event names:
$(document).off('click.myevent', '.form-template-name');

Try this:
$('.form-template-name').unbind("click"", event);
and define the click event as:
var event = function() {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
};
Then use it as you did before.

You can also try using the event.preventDefault() functionality. It is described in more detail here: http://api.jquery.com/event.preventdefault/

MooTools custom drag event

Is there anyway to define a drag event in MooTools using the mousedown, mouseup and mousemove events. I would like to be able to do something like the following:
$('#knob').addEvent('drag', function (e) {
// Drag event code goes here...
});

Dragging
Although Mootools has implemented all you need for drag, drop, slide and similar effects, writing your own event is a good way to learn how events work. Here is an example of how to add additional custom event by using the Element.Events Object.
Effect starts on mousedown event that registers mousemove event. When dragging is over mouseup event is fired that removes the mousemove event listener.
Since it can happen that mouse leaves the box (mouseup is not fired to clean up), mouseout event is added also.
At every step of the effect, drag event handler is launched with the original event object passed as argument, You can see the type of the original event with console.log( e.type );
window.addEvent( 'domready', function() {;
Element.Events.drag = {
// the function that will get fired when the custom event is added
onAdd: function() {
this.addEvents({
mousedown: function(e) {
this.store( 'x', e.page.x - this.getPosition().x );
this.store( 'y', e.page.y - this.getPosition().y );
this.addEvents({
mousemove: function(e) {
this.setPosition({
x: e.page.x - this.retrieve( 'x' ),
y: e.page.y - this.retrieve( 'y' )
});
this.fireEvent( 'drag', e );
},
mouseout: function(e) {
this.fireEvent( 'mouseup', e );
}
});
},
mouseup: function(e) {
this.removeEvents( 'mousemove' );
this.removeEvents( 'mouseout' );
this.fireEvent( 'drag', e );
}
});
},
// the function that will get fired when the custom event is removed
onRemove: function() {
this.removeEvents( 'mousedown' );
this.removeEvents( 'mouseup' );
}
};
$('draggable').addEvent( 'drag', function( e ) {
console.log( e.type );
});
// $('draggable').removeEvents( 'drag' );
});
A few good articles about Mootools events:
mootools.net
ryanflorence.com

.on event keeps getting fired over and over again

I'm trying to setup an event where it fires after my element is opened. So I have a tooltip and I have a click event which shows the tooltip. Then when that happens I setup a document click event that gets fired so if the user clicks anywhere on the stage it removes all tooltips. But what's happening is it gets called before the tooltip even gets a chance to show. So it's firing the document event over and over again.
$('.container img').popover({placement:'top', trigger:'manual', animation:true})
.click(function(evt){
evt.preventDefault();
el = $(this);
if(el.hasClass('active')){
el.popover('hide');
}else{
clearDocumentEvent();
el.popover('show');
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
hideAllTooltips();
});
}
el.toggleClass('active');
})
var hideAllTooltips = function(){
$('.container img').popover('hide');
$('.container img').removeClass('active');
}
var clearDocumentEvent = function(){
$(document).off('click.tooltip touchstart.tooltip');
};

The problem stems from event bubbling. You can verify this by doing the following test:
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
//hideAllTooltips();
console.log($(this)); // will return .container, body, html
});
Try using event.stopPropogation():
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(e){
e.stopPropagation();
hideAllTooltips();
});
DEMO:
http://jsfiddle.net/dirtyd77/uPHk6/8/
Side note:
I recommend removing .tooltip from the on function like
$(document).on('click touchstart', ':not(.container img)', function(){
e.stopPropagation();
hideAllTooltips();
});

How to bind click events to a different class?

So I have two click events for "button-open" and "button-close". I have one button that switches from "button-open" to "button-close" on click. So when i click it again, it should fire the event for "button-close" but instead it fires the event for "button-open" again.
Demo : jsFidde
Here's my code:
Button​
<script>
$(document).ready(function() {
$(".button-open").click(function() {
$(this).removeClass("button-open").addClass("button-close");
alert("Open Was Clicked");
});
$(".button-close").click(function() {
$(this).removeClass("button-close").addClass("button-open");
alert("Close Was Clicked");
});
});
</script>

Use on() instead of click(), since you need to bind to an element that doesn't yet exist when you initially bind it.
$(document).on('click', '.button-open', function() {
$(this).removeClass("button-open").addClass("button-close");
alert("Open Was Clicked");
});
$(document).on('click', '.button-close', function() {
$(this).removeClass("button-close").addClass("button-open");
alert("Close Was Clicked");
});
DEMO.