Develop Reference

Android click event div element

I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.

Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers

KendoUI Combobox Mouse Events

Im trying to catch the oncontextmenu and onmousedown events of a control that is a kendoUI combobox.
I've created (modified existing) a Jsfiddle that shows an example of what we are trying to achieve.
Jsfiddle
document.getElementById("cbo1").oncontextmenu = function(ev){
alert(ev);
return false;
};
document.getElementById("cbo1").onmousedown = function(ev){
alert(ev);
};
You can see that the mouse down and the context menu items are not firing for the comboBox input but they are firing fine for the standard input.
Any ideas on how i can get the mouse events firing for the combobox input?

This question is similar to this, except you want a click and oncontext event for kendo combobox which is a non registered event and that is not posible using jquery alone since kendo UI doesn't expose it to jQuery refer to this kendo forum post.
To summary the answer, you can to this by modifying the answer form above question, dont forget move your return false otherwise the right click options will appear.
$(element.input).bind("contextmenu", function (e) {
binding.get();
return false
});
refer to this jsfiddle

This is how I did it...
var $parent = $(element.input).closest('.k-combobox')
$parent.on({ 'mouseenter': function(){ }, 'mouseleave': function(){ } });
Works just fine.
EXPLANATION:
You can't put the event (directly) onto the Element.Input or onto the control (itself). But you're using jQuery...so you can find the control-container & put the event on that...and voila!
For those that need visuals..

jQuery click handlers not triggered inside a modal window

I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.

When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});

How to retain input focus when clicking on a scrollbar for selection list

I wrote a little plugin for mootools to have a time picker attached to an input field.
It works just fine, but I've noticed that in Chrome, when you click on the scrollbar to navigate the chooser list, the input loses focus. In other browsers, it does not lose focus.
http://jsfiddle.net/SDBCe/
//the events that close the selector during blur:
el.addEvents({
'focus': function() {
TimePicker.active(el);
},
'blur': function() {
setTimeout( function() {
el.fireEvent('change');
},150);
},
'change': function() {
TimePicker.validateField(el);
TimePicker.inactive(el);
},
'keypress': function(evt) {
if(evt.key == 'enter') {
el.blur();
}
}
});
How should I adjust my events so that way simply using the scrollbar on the dropdown list doesn't blur my input?

After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:
1. upon the opening of the list, add a click event to the document that
checks to see if the click is not on in the active input, and not on
the active list. If this is true and the click is in fact on a non-listy
part of the document, then close it.
2. add an event to each list item in the suggest list (when the list is
open only) that selects the value and closes the list.
3. add an keydown event to the input itself so if the user hits enter,
it changes the value and closes the list.
the new version of the javascript code can be found here: http://jsfiddle.net/SDBCe/1/

CKEditor InnerHTML error

I have two CKeditor fields that are a part of the form. I have some action buttons on the page, so whenever I click either 'clear' or 'cancel' this function is fired along with other stuff:
CKEDITOR.instances['ed1'].updateElement();
CKEDITOR.instances['ed1'].setData('');
CKEDITOR.instances['ed2'].updateElement();
CKEDITOR.instances['ed2'].setData('');
That way I am cleaning the contents of the CKEditor fields. The problem is that if I click 'cancel', then go back to the page and click "clear", Internet Explorer gives an "innerHTML is null or undefined" JS error.
It works fine in other browsers and only happens if I perform the update twice in a row from different buttons. Is there a workaround for that?
CKEditor initialization onReady:
CKEDITOR.replace('ed1', { htmlEncodeOutput: true, width:"700",toolbar: 'Basic'
});
CKEDITOR.replace('ed2', { htmlEncodeOutput: true, width:"700",toolbar: 'Basic'
});
I probably should add that I use .show() and .hide() whenever I use cancel button to hide the form and show other stuff. There's no page reload.

I found the solution to this problem. The reason it was doing that because my clear method was fired using jQuery bind function and wasn't placed in the onReady function, so it was binding the events together and giving this error. The solution to this was to use unbind first.