I have a form with a couple of selects inside. I'm applying the select2 jquery plugin over those selects like this:
$("select.company_select, select.positions_select").select2();
The select's work fine, but I have this code to autosubmit my form (I have the autosubmit class on the form tag).
var currentData;
$('.autosubmit input, .autosubmit select, .autosubmit textarea').live('focus', function () {
currentData = $(this).val();
});
$('.autosubmit input, .autosubmit select, .autosubmit textarea').live('change', function () {
console.log('autosubmiting...');
var $this = $(this);
if (!currentData || currentData != $this.val()) {
$($this.get(0).form).ajaxSubmit(function (response, status, xhr, $form) {
currentData = "";
});
}
});
The thing is that with the select2, the change or the focus event doesn't fire at all. If I remove the select2, then the events get fired perfectly.
What am I doing wrong?
Select2 has only 2 events, open
and change
(http://select2.github.io/select2/#events), you are able to add listeners only to them.
You can use open
event instead of focus
for <select>
element.
And please don't use live()
method, as it is deprecated. Use on()
instead.
var currentData;
$(".autosubmit select").on("open", function() {
currentData = $(this).val();
});
$(".autosubmit input").on("focus", function() {
currentData = $(this).val();
});
$(".autosubmit input, .autosubmit select").on("change", function() {
var $this = $(this);
console.log('autosubmitting');
if (!currentData || currentData != $this.val()) {
$($this.get(0).form).ajaxSubmit(function (response, status, xhr, $form) {
currentData = "";
});
}
});
Here is the Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With