i'm listening to a click event. When triggered, I need to bind a different event (for other element) but it keeps triggering both on the first event.
My code:
$(".element1").on("click", function(){
console.log("triggered element1");
$(".element2").on("click", function(){
console.log("triggered element2");
})
});
A separate copy of the event handler for .element2 will get bound every time .element1 is clicked. If you want to prevent that, remember in a variable whether you have already bound the handler.
var e2bound = false;
$(".element1").on("click", function(){
console.log("triggered element1");
if(!e2bound){
$(".element2").on("click", function(){
console.log("triggered element2");
})
e2bound=true;
}
});
An alternative solution would be to unbind the first handler when it runs:
$(".element1").on("click", function e1handler(){
console.log("triggered element1");
$(this).off("click", e1handler);
$(".element2").on("click", function(){
console.log("triggered element2");
})
});
Try using .off() to remove the event and use e.stopPropgation()
$(".element1").on("click", function(){
console.log("triggered element1");
$(".element2").off('click').on("click", function(e){
e.stopPropagation();
console.log("triggered element2");
})
});
Frequent binding and unbinding is a bad practice.. need to avoid it if possible..
It will be easier if you can show the HTML structure..
Related
I need to attach an event to the main view element, this.$el. In this case its an 'LI'. Then I need to re render this view sometimes. The problem is if i re render it, it attaches any events in the onRender method that is attached to this.$el each time its rendered. So if i call this.render() 3 times the handler gets attached 3 times. However, if i attach the event to a childNode of this.$el, this does not happen and the events seem to be automatically undelegated and added back on each render. The problem is I NEED to use the main this.$el element in this case.
Is this a bug? Shouldn't this.$el function like the childNodes? Should I not be attaching things to this.$el?
inside the view:
onRender: function(){
this.$el.on('click', function(){
// do something
});
If you're able to use the view's event hash, you could do the following:
var Bookmark = Backbone.View.extend({
events: {
'click': function() {
console.log('bound once')
}
}
...});
If for some reason that's not an option, you could explicitly remove any existing event listeners for this event in the render method, which will prevent the listener from being attached multiple times:
var Bookmark = Backbone.View.extend({
...
render: function(x) {
this.$el.off('click.render-click');
this.$el.html(this.template());
this.$el.on('click.render-click', function () {
console.log('only ever bound once');
});
return this;
}
});
All:
I use D3 bind a handler to a DIV click event, then after that, I want to add some more functions to same click handler, I wonder how to do that?
Like:
<div id="test">TEST MULTI CLICK event handler</div>
d3.select("#test")
.on("click", function(){
alert("First click!");
})
d3.select("#test")
.on("click", function(){
d3.select(this).on("click")();
alert("And this is second click!");
});
But I got "undefined is not a function" at d3.select(this).on("click")();
Could anyone help me with this.
Thanks
[UPDATE] Yony's solution works for me
d3.select("#test")
.on("click.init", function(){
alert("First click!");
})
d3.select("#test")
.on("click.customize", function(){
alert("And this is second click!");
});
When click on datepicker (http://www.eyecon.ro/bootstrap-datepicker/), his SHOW event fires, but the modal's SHOW.BS.MODAL fires too. Whhere is a problem?
$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
alert("Q");
});
$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
alert("W");
});
$("#dlg3000to3100")
.modal("show");
});
exampleExample
Thanks
It seems to be a bug (or feature?) of the datepicker. What you can do is to prevent the show.bs.modal event reaching the dialog.
$('#ArrDate').on('show.bs.modal', function (event) {
event.stopPropagation();
});
This will detect the event at the datepicker level and stop the event propagation, so show.bs.modal will not 'bubble up' to the dialog.
Another work around is to swap the show.bs.modal with shown.bs.modal on modal event.
modal.on('shown.bs.modal', function (event) {
// Do something
});
however if it is not possible to swap show with shown or hide with hidden use the namespace check
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
// Do something
}
});
Had a similar issue, caused by the datepicker watching for a show event.
One option is to use the shown event on the modal but this is not ideal in all cases
$('#dlg3000to3100').on('shown.bs.modal', function (event) {
// modal code in here
});
A more elegant solution is to check the namespace of the event
$('#dlg3000to3100').on('show.bs.modal', function (event) {
if(event.namespace !== 'bs.modal') return;
// modal code in here
});
https://jsfiddle.net/bzh75tww/
How to check if a button is clicked or not in prototype JavaScript?
$('activateButton').observe('click', function(event) {
alert(hi);
});
The code above is not working.
With this button:
<button id="mybutton">Click Me</button>
Use this:
$('mybutton').observe('click', function () {
alert('Hi');
});
Tested and works, here.
You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.
Also, just an explanation:
The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery's .on function, in that it is for binding an event handler to an element.
Also, if you need it to be a permanent 'button already clicked' thingy, try this:
$('mybutton').observe('click', function () {
var clicked = true;
window.clicked = clicked;
});
And then, if you want to test if the button has been clicked, then you can do this:
if (clicked) {
// Button clicked
} else {
// Button not clicked
}
This may help if you are trying to make a form, in which you don't want the user clicking multiple times.
How one may do it in jQuery, just for a reference:
$('#mybutton').on('click', function () {
alert('Hi');
});
Note that, the jQuery code mentioned above could also be shortened to:
$('#mybutton').click(function () {
alert('Hi');
});
jQuery is better in Prototype, in that it combines the usage of Prototype's $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.
How one may do it with plain JavaScript:
document.getElementById('mybutton').onclick = function () {
alert('Hi');
}
Just for a complete reference, in case you need it.
$('body').delegate('.activateButton', 'click', function(e){
alert('HI');
});
I want to fire dragend event of a marker in another event say click event on the map. how can I do that?
google.maps.event.addListener(map,'click',function(pt){
posSelectMarker.setPosition(pt.latLng);
//Here I want to fire dragend event.
});
Use event.trigger;
google.maps.event.trigger(markerObject, 'dragend', args);
This is a bit more complete:
theListener = google.maps.event.addListener(posSelectMarker,'dragend',function(event){
console.log(event.latLng);
});
Note that you can get at the object with the event param
Should be:
google.maps.event.addListener
instead of:
google.maps.event.trigger
Quick example:
google.maps.event.addListener(marker_var_name, 'dragend', function(){
alert('drag ended')
});
If you have the marker object, you could call addListener directly to add a dragend event.
var marker = new google.maps.Marker({
...
)};
marker.addListener('dragend', function() {
// do something
});