I'm using selectize.js something like this:
$( 'select' ).selectize( {
onChange: function( value ) {
// how to get original element here?
}
} );
There's several select elements on the page.
I want to get select on which the event occurred inside of onChange.
How can I do it?
you can use $(this)[0] inside the onChange. Once this is the selectize object by itself
$( 'select' ).selectize( {
onChange: function( value ) {
var obj = $(this)[0];
alert(obj.$input["0"].id);
}
} );
Here's a Fiddle
you can get all user events from onInitialize :
$('select').selectize({
onInitialize: function (selectize) {
selectize.on('change', function (value) {
var elem = this.$input[0];
console.log('on "change" event fired > ' + elem.id);
});
selectize.on('focus', function () {
console.log('on "focus" event fired');
});
selectize.on('dropdown_open', function () {
console.log('on "dropdown_open" event fired');
});
}
}
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'm trying to completely disable the click events for some elements but to have the option to reenable them later.
What I have try so far:
$('a').on('click', function(e) {
// some stuffs...
});
...
$('a').each(function(i, el) {
this.clickEvents = $._data(el, 'events').click;
$(el).off('click');
});
// reenable them later (this is not working)
$('a').each(function(i, el) {
$(el).on('click', this.clickEvents);
});
...
Any ideas where I'm wrong?
Try .handler in each clickEvent:
$('a').each(function(i, el) {
// clickEventHandlers is an array of handler functions
this.clickEventHandlers = $._data(el, 'events').click.map(function(e) {
return e.handler;
});
$(el).off('click');
});
// re-enable them later
$('a').each(function(i, el) {
// reapply the handlers in order
this.clickEventHandlers.forEach(function(handler) {
$(el).on('click', handler);
});
});
The great thing about this is that you re-apply all event listeners in order.
Working JSFiddle.
Try $._data(el, 'events').click[0].handler for first click event , or use $.each() to iterate all click or other events ; store handler at element .data() ; e.g., .data("events") ; reattach handler using $(this).data().events[0]
$("a").data("events", []).on("click", function() {
console.log(this)
});
$("a").each(function(i, el) {
$.each($._data(el, 'events').click, function(index, event) {
$(el).data().events.push(event.handler)
})
console.log($(this).data("events"));
$(el).off("click");
});
// reenable them later (this is not working)
$("a").each(function(i, el) {
$.each($(this).data().events, function(index, handler) {
$(el).on("click", handler);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
click
I have a change function in javascript who permit me to do an action when the user click on a chekbox who's name is "nameCheckbox" so i have this script.
$("input[name='nameCheckbox']").each(function()
{
var object = creatObject($(this).val());
$(this).change(function()
{
if($(this).is(':checked'))
{
var object = creatObject($(this).val());
}
else
{
object.remove();
}
});
});
But i want to have another checkbox who permit to check or uncheck all the checkbox who's name is "nameCheckbox" and pass by the function change of all the element. So i have this code.
$("[name='allCheck']").change(function()
{
var selectAll = false;
if($(this).is(":checked"))
{
selectAll = true;
}
$("input[name='nameCheckbox']").each(function()
{
if(selectAll)
{
$(this).prop('checked',true);
}
else
{
$(this).prop('checked',false);
}
//And here i want to do something like $(this).change();
});
});
Thank you
$(this).change() should work, according to change()
Description: Bind an event handler to the "change" JavaScript event,
or trigger that event on an element.
This is effectively the same as using trigger()
$(this).trigger('change');
I have a Jquery event which does not trigger every time:
http://jsfiddle.net/LphjL/
My code:
thisWebsite = websiteInitialization ();
function websiteInitialization () {
companyName = "name";
var thisWebsite = new websiteConstructor(companyName);
return thisWebsite;
}
function websiteConstructor(companyName) {
this.companyName=companyName;
}
function ajaxUpdateDB(websiteElement, value) {
return $.post('/echo/html/',{html: "<p>Text echoed back to request</p>",delay: 3}
,function(a){}
,"json"
);
}
function updateDatabase(websiteElement, value) {
var promise = ajaxUpdateDB(websiteElement, value);
promise.complete(function () {
thisWebsite[websiteElement] = value;
});
}
$(document).ready(function() {
$(".websiteElement").change(function() {
updateDatabase( $(this).attr('id'), $(this).val() );
});
$("#infos").click(function() {
htmlCode = "<input class='websiteElement' id='companyName' type='text' value='"+thisWebsite.companyName+"'>";
$("#panel-content").html(htmlCode);
});
$("#homepage").click(function() {
htmlCode = "homepage";
$("#panel-content").html(htmlCode);
});
});
As you can see in the jsfiddle, the first time the input field is updated the Ajax is triggered, but:
if you click on 'Homepage', then click back on 'Generic infos' and update the input field again this time the Ajax is NOT triggered: $(".websiteElement").change event is not called the second time.
You need to bind the event using event delegation, or rebind the event after you replace the element. Below is the event delegation option:
$("#panel-content").on("change",".websiteElement",function() {
updateDatabase( $(this).attr('id'), $(this).val() );
});
If the event is bound directly on the element, the event will be lost when the element is replaced/removed.
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);
});
});
};