I'm trying to figure out how I can wrap the click event. Eg this is the code I want.
$("#test").aclick(function() {
alert('hi');
});
The only thing that aclick does is use the e.preventDefault automatically.
Is it something like?
$.fn.aclick = function(e) {
e.preventDefault();
return $.fn.click.apply(this, arguments);
});
Thanks.
When binding a handler, the event object e doesn't exist yet. You need to create a default event handler that calls the supplied one:
$.fn.aclick = function (handler) {
return this.each(function () {
var el = this;
$(el).click(function (e) {
e.preventDefault();
handler.call(el, e);
});
});
};
Related
I am using jquery to find each target element in iframe on click event. But the click event triggers mutiple times on each click. This is the code that i used. I am using this function to style each target element on click. How can i solve this issue.
var getElement = function () {
$('[data-edit="froala"]').on('froalaEditor.initialized', function (e, editor) {
var $div_tag = $('[data-edit="froala"]').find('iframe').contents().find('body');
$div_tag.on('click', function(e) {
var element_name = e.target.nodeName.toLowerCase();
var $target_class = $('[data-target="'+element_name+'"]');
trigger_object(e);
});
});
}
var trigger_object = function (e) {
$('body').on('change', '[data-style="hr-style"]', function (event) {
$(e.target).css($(this).data('css'),this.value);
});
$('body').on('change', '[data-style="div-style"]', function (event) {
$(e.target).css($(this).data('css'),this.value);
});
}
unbind your existing change event before binding it to prevent event from working multiple times
add .off('change') to unbind all exiting change event
before .on('change') to bind the change event
$('[data-style="hr-style"]').off('change').on('change', function (event) {
$(e.target).css($(this).data('css'),this.value);
});
$('[data-style="div-style"]').off('change').on('change', function (event) {
$(e.target).css($(this).data('css'),this.value);
});
Then probably foralaEditor.initialized is fired multiple times.
Try with off, but on the div_tag click not on body,
var getElement = function () {
$('[data-edit="froala"]').on('froalaEditor.initialized', function (e, editor) {
var $div_tag = $('[data-edit="froala"]').find('iframe')contents().find('body');
$div_tag.off('click').on('click', function(e) {
var element_name = e.target.nodeName.toLowerCase();
var $target_class = $('[data-target="'+element_name+'"]');
trigger_object(e);
});
});
}
I want an event to be triggered after the creation of the corresponding HTML object (href in my case).
I've written this code:
$(document).ready(function() {
$('body').on('click', '#stats-link', function(e) {
console.log('TRIGGERED'); // nothing is logged
e.preventDefault();
$.post('stats.php', {'email': $('#email').val()}, function() {
window.location = $(this).attr('href');
});
});
$('#submit_button').click(function(e) {
e.preventDefault();
...
$('#info').html('<p class="desc">bla bla bla</p>');
...
});
});
So, I make a href object identified by stats-link in the #submit_button function, then I want him to be triggered in the corresponding function (i.e., $('body').on(...), but it doesn't happen. What am I doing wrong?
Did you missed this line:
$('#stats-link').trigger('click');
This will trigger the click event. The code you shared only binds the event. You need to trigger it.
JS:
$(document).ready(function () {
$('body').on('click', '#stats-link', function (e) {
e.preventDefault();
alert('clicked')
$.post('stats.php', {
'email': $('#email').val()
}, function () {
window.location = $(this).attr('href');
});
});
$('#submit_button').click(function (e) {
e.preventDefault();
$('#info').html('<p class="desc">bla bla bla</p>');
$('#stats-link').trigger('click'); //This is where you trigger the click.
});
});
Working Demo: http://jsfiddle.net/lotusgodkk/artaq4xj/
What is e? Are you sure the click event isn't actually working, but just giving you a script error and bailing out before it does anything? Your callback function does not define the passed in event parameter e.
$('body').on('click', '#stats-link', function() { // <-- No e parameter supplied.
e.preventDefault(); // <---- What is e?
...
}
Your preventDefault() parameter is lacked :
$('body').on('click', '#stats-link', function(event) {
event.preventDefault();
$.post('stats.php', {'email': $('#email').val()}, function() {
window.location = $(this).attr('href');
});
});
I've been trying to remove the click event handler after being clicked once to prevent the event from firing multiple times.
I've tried .unbind(), .off(), .one() and put each in various different places in the function, but none seem to work.
If I use .off() I get a undefined is not a function error.
If I use .one() I want to basically turn the event back on if I click the other button. So if I click on select, I want it to only fire once, but if I then click on unselect, I want select to be clickable again.
I've tried doing the following, but oddly the code doesn't even fire, and so I've been forced to use click().
$().on('click', function()...
Which function should I use and where should I put it?
(function($) {
Drupal.behaviors.wysiwyg = {
attach: function(context, settings) {
var toggle = function(state) {
$('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
}
$('#wysiwyg-select-all').click(function(){
toggle(true);
return false;
});
$('#wysiwyg-unselect-all').click(function(){
toggle(false);
return false;
});
}
}
}(jQuery))
Check if this works for you. Also make sure the jquery version is above 1.7 for "on", "off" to work.
(function($) {
Drupal.behaviors.wysiwyg = {
attach: function(context, settings) {
var counter = 0;
var toggle = function(state) {
$('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
}
$(document).off('click',"#wysiwyg-select-all").on('click', "#wysiwyg-select-all", function(e) {
toggle(true);
return false;
});
$(document).off('click',"#wysiwyg-unselect-all").on('click', "#wysiwyg-unselect-all", function(e) {
toggle(false);
return false;
});
}
}
}(jQuery))
UPDATED
I was messing around with a couple of the things these other guys were suggesting and I think this is exactly what you need to accomplish this:
(function ($) {
Drupal.behaviors.wysiwyg = {
attach: function (context, settings) {
var selectFn = function() {
toggle(true);
return false;
}
var unselectFn = function() {
toggle(false);
return false;
}
var toggle = function (state) {
$('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
if (state) {
$(document).off("click", '#wysiwyg-select-all,#wysiwyg-unselect-all', "**");
$(document).on("click", "#wysiwyg-unselect-all", unselectFn;
}else{
$(document).off("click", '#wysiwyg-select-all,#wysiwyg-unselect-all', "**");
$(document).on("click", "#wysiwyg-select-all", selectFn;
}
};
$(document).on("click", "#wysiwyg-select-all", selectFn);
$(document).on("click", "#wysiwyg-unselect-all", unselectFn);
}
};
}(jQuery));
It toggles the binding of the buttons events and will work with dynamically created elements. This is a derivative of Matt Green's answer, but I noticed several problems with his, namely that he was calling the selectFn and unselectFn in his event binding rather than referencing them.
Something like this:
$("#wysiwyg-select-all").one("click", function() {
toggle(true);
return false;
});
Add a class name to the click button and then remove the class once its clicked once.
$('#wysiwyg-select-all .myclassname').on('click', function(){
toggle(true);
$(this).removeClass('myclassname');
$('#wysiwyg-unselect-all').addClass('secondclassname');
return false;
});
$('#wysiwyg-unselect-all .secondclassname').on('click', function(){
toggle(false);
$('#wysiwyg-select-all').addClass('myclassname');
$(this).removeClass('secondclassname');
return false;
});
Why don't you use any global variable as a flag. On click event set it true.
if (btn1Clicked)
return;
btn1Clicked=true;
And to reenable just set it false.
You can use return false instead of return if required.
This should work for dynamically created elements:
(function ($) {
Drupal.behaviors.wysiwyg = {
attach: function (context, settings) {
var toggle = function (state) {
$('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
};
$(document).on("click", "#wysiwyg-select-all", selectFn());
$(document).on("click", "#wysiwyg-unselect-all", unselectFn());
}
};
}(jQuery));
function selectFn() {
$(document).off("click", '#wysiwyg-select-all', "**");
$(document).on("click", "#wysiwyg-unselect-all", unselectFn());
toggle(true);
return false;
}
function unselectFn() {
$(document).off("click", '#wysiwyg-unselect-all', "**");
$(document).on("click", "#wysiwyg-select-all", selectFn());
toggle(false);
return false;
}
I would like a cross modern browser way to take a mouse event from one html element and pass it on to another.
eg.
el1.addEventListener('mousemove', function(e) {
el2.trigger('mousemove', e);
});
el2.addEventListener('mousemove', function(e) {
//THIS SHOULD BE CALLED WHEN EITHER el1
});
a jquery solution is ok but I would prefer a non-jquery solution. Is this simple?
Here is the correct code
var el1 = document.getElementById('el1');
var el2 = document.getElementById('el2');
el1.onmousemove = function(e) {
alert('el1 event');
el2.onmousemove(e);
};
el2.onmousemove = function(e) {
alert('el2 event');
};
demo
This is good if you want the event argument e to pass over to el2's event. This updated demo shows mouse position being passed over.
native should work like that
var evt;
el1.onmousemove = function() {
evt = document.createEvent('MouseEvent');
evt.initEvent('mousemove', true, true);
el2.dispatchEvent(evt);
}
You can read up on element.dispatchEvent here:
https://developer.mozilla.org/en-US/docs/DOM/element.dispatchEvent
If you accept a jQuery answer then here's the code:
// el1 and el2 are the jQuery objects of the DOM elements
el1.mousemove(function (event) {
el2.mousemove(event);
});
In pure javascript:
el1.onmousemove = function(e) {
el2.onmousemove('mousemove', e);
};
el2.onmousemove = function(e) {
};
el1.addEventListener('mousemove', handler, false);
el2.addEventListener('mousemove', handler2, false);
function handler(e) {
// do some stuff
handler2.call(el2, e); // pass el2 as this reference, event as the argument.
};
not too sure if this is what you are looking for, just name the event handlers and trigger the one off the other.
if you do not need the this reference in the second handler, use handler2(e); instead.
further readings:
Function.prototype.call
Here is a half-baked demo passing the mouse event args. I'm unsure how well supported layerX/Y is, I just used it to show the demo.
I'm trying to create a custom function that unbinds and then binds an event. It looks like this:
App.bindEvent = function(selector, eventType, eventHandler) {
$(selector).unbind(eventType);
$(selector).bind(eventType, function(event) {
eventHandler(event);
});
};
However, the problem I am facing is that I cannot use the this keyword to reference the DOM element that was clicked. For example, I cannot do this:
App.bindEvent("#my-element", "click", function() {
var myId = $(this).attr("data-my-id");
});
How would I go about getting the this keyword to point to the clicked DOM element like it does in jQuery.bind()?
Thanks for any help.
Change:
eventHandler(event);
To:
eventHandler.call(this, event);
That'll change the "scope" of your function to be the same as the scope of the original "bind" call.
How about this instead:
App.bindEvent = function(selector, eventType, eventHandler) {
var element = this;
$(selector).unbind(eventType);
$(selector).bind(eventType, function(event) {
eventHandler.call(element, event);
});
};
You need to call the handler in the context of the object:
eventHandler.call(this, event);
I think you're trying to refer to
event.target
For example:
App.bindEvent("#my-element", "click", function(event) {
var myId = $(event.target).attr("data-my-id");
});
check out jquery's event documentation