Develop Reference

.on('change' ...) doesn't trigger for data changed by JS

I am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?

The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.

trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})

how to automatically close mobile select box when an option change event is fired?

Testing on Android 4.0.2 if I open a select menu and pick an option the change event fires ok but I have to click the done button of the menu to close the it. Is it possible to trigger this when an option has been selected? so far I've tried adding .focus() and .blur() to the body to shift focus but with no success.
This is the snippet of code I've been testing:
$('select').on('change', function(e){
console.log( $(this).find("option:selected").data('id') );
$('body').blur();
e.preventDefault();
});
Also jsfiddle: http://jsfiddle.net/dnRZc/5/

Try this it worked for me.
$('select').on('change', function(e){
$(this).blur();
e.preventDefault();
});

jQuery button on a li does not triggers change event on input before click

I have a input field. When the onchange event is triggered, I want to enable a jQuery button based on a LI element. I want to have the same behaviour as a normal button would do. The problem is, if I click on button when it's disabled, jQuery catches the event and prevents the default behaviour to occurs, which should release the focus on the input field and trigger the onchange event before the onclick is triggered on the button.
I'm using jQuery 1.6.4 with jQuery UI 1.8.16 in Chrome.
In this live demo : http://jsfiddle.net/francisfortier/QMDc2/5/, you have three fieldsets. The first one uses a standard button, the second one, a jQuery button based on a li and the third one, use again a jQuery button based on a li with a special hack to manually release the focus from the input field on the click capture. This third fieldset can solve my problem on modern browsers, but it will not in IE8 because it requires to use event capturing.
Do you have a better cross browser solution to have the same behaviour with a jQuery button as a standard button?
Thank you

What about adding .unbind('click') before your click handler:
$('#jQueryButton').find('li').button({
disabled: true
}).unbind('click').click(function() {
alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
});
Demo: http://jsfiddle.net/jtbowden/yPHKp/
Of course, then you have to add the smarts to the click handler to not execute when the input is empty:
$('#jQueryButton').find('li').button({
disabled: true
}).unbind('click').click(function() {
if($('#jQueryButton').children('input').val()) {
alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
}
});
Demo: http://jsfiddle.net/jtbowden/yPHKp/1/
Or, you could add a keyup handler. Then the change is made before the button is clicked:
$('#jQueryButton').children('input').bind('change keyup', function() {
var self = $(this);
self.closest('fieldset').find('.ui-button').button(self.val() ? 'enable' : 'disable');
});
Demo: http://jsfiddle.net/jtbowden/GcnYz/1/
A better solution might be to unbind the click.button handler and then rebind it with the addition of a .blur() event to the input fields:
$('#jQueryButton').find('li').button({
disabled: true
}).unbind('click.button').bind('click.button', function(event) {
$('#jQueryButton').children('input').blur();
if ($(this).button("option", "disabled")) {
event.preventDefault();
event.stopImmediatePropagation();
}
}).click(function() {
alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
});
This retains all of your validation in place, plus forces the change event to happen before the button click. You could integrate the final .click() handler into the click.button event by putting the guts in an else block.
Demo: http://jsfiddle.net/jtbowden/GcnYz/2/

Repurposing Jeditable jQuery plugin to use buttons instead of on-text click?

I'm trying to slightly repurpose the functionality of the Jeditable plugin to be controlled with buttons instead of clicking on the text. I've got a stripped-down version of the section I'm working on here.
Right now I'm triggering the text click event with my Edit button, hiding my Edit button once it's clicked, then making it reappear after the submit button is clicked. Here's my jQuery for the button click:
$('.jeditable-activate').click(function() {
$(this).prev().click();
$(this).addClass('hidden');
});
And here are the parameters I'm passing to the Jeditible function:
onedit : function() {
$(this).siblings('.jeditable-activate').addClass('hidden');
},
onsubmit : function() {
$(".jeditable-activate.hidden").removeClass('hidden');
}
I'd like to disable the default functionality of clicking on the text to edit, but I can't figure out a way to do this without breaking the functionality of my Edit button.

You probably have found a way to do it since February but it might help someone else. I did the same using a custom jQuery event like that:
$('.edit').editable('http://www.example.com/save.php', {
id : 'elementid',
name : 'newvalue',
[...]
event : 'whateverEvent'
});
$('.jeditable-activate').click(function() {
$(this).prev().trigger('whateverEvent');
});

What could cause conflict with Tipsy's focus trigger?

I'm using the Tipsy jquery plugin and the focus triggers acts the same way as the hover trigger. Tipsy stops displaying once my mouse is off an input field even though the field is still focused. What could cause this issue? Based on this jQuery tipsy plugin. On focus trigger not working. It's not the actual plugin that's causing the issue
Here's the page I'm testing it on
http://uploads.glumbo.com/?op=registration

You will want to update Tipsy file you are using. The one you are using right now is significantly different than the latest version of Tipsy.

As Haochi says, you need to update your Tipsy version to 1.0.0a. Then use the following code to add both hover and focus to your tipsy tooltips (demo):
$('.registerform [title]')
.tipsy({
trigger: 'manual', // manual stops binding of any internal tipsy events
gravity: 'w',
fade: true
})
.bind('focus mouseenter', function(e) {
// flag indicating the input has focus
if (e.type === 'focus') {
$(this).addClass('hasFocus');
}
$(this).tipsy("show");
})
.bind('blur mouseleave', function(e) {
// if mouseleave is triggered but the input has focus, ignore it
if (!$(this).is('.hasFocus') || e.type === 'blur') {
$(this).removeClass('hasFocus').tipsy("hide");
}
});