Develop Reference

How to trigger an event in jQuery?

I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)

This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/

Prevent double-click event on lower layer when double-click\hiding a higher layer

So I have a form where double-clicking a field brings up a custom modal window. The buttons for "Save" and "Cancel" on the modal window have "click" events that call hide() on the modal window layer. However, some of our users naturally double-click things. Double-clicking the save or cancel buttons fires the click event and hides the modal window but also fires the double-click event of the field that was under the modal window causing the modal window to display again. I know using a setTimeOut() and delaying the hide() of the modal window will resolve the issue but I prefer not to degrade the responsiveness of the UI if possible. Any suggestions?
Here is a fiddle to generally explain the problem.
https://jsfiddle.net/e51rc24j/4/
$(function() {
$(".field").on("dblclick", function(ev) {
$(".hoverlayer").show();
});
$(".hoverlayer").on("click", function(ev) {
var thisLayer = this;
$(thisLayer).hide();
/* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
setTimeout(function(){
$(thisLayer).hide();
}, 300);*/
});
});

At first I thought the problem was propagation, so I added a stopPropagation to your event. But then I found out that it's not the double click that's propagating. The problem is something completely different, namely that the SECOND click (of the double click to close the black overlay) LANDS on the input field again, which triggers the double click event on the input box again.
So all you have to do, is move the SAVE and CANCEL buttons so they are not directly on top of the input field.
I have made a little change to your jsfiddle to illustrate:
https://jsfiddle.net/e51rc24j/6/
If you double click in the "PROBLEM", the modal black div will open again, because your second click lands INSIDE the <input> text field.
However, if you double click anywhere else in the black div ("Not a problem"), it will not open.

Can't click button when soft-keyboard is visible

When an text input element has focus (and the soft keyboard is visible), I can't click the submit button (which is clearly visible) directly. I have to first dismiss the keyboard (by clicking elsewhere or on "Done" on the keyboard), and then click the submit button.
This is confusing behaviour. I have considered removing the log-in button altogether when the keyboard is visible, but that would be too confusing (for users wouldn't know that they could click "Go", or will be annoyed that the login button keeps disappearing).
This only happens on iOS (not sure if its restricted to iOS 7, but suspect it might be), and I'm using Telirik AppBuilder for my app.

function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);

Because I was using <button> tag the soft keyboard popped up when not required. I have now changed all for <table> (inside a <td> tag, but could be a <div> ) with an <img> tag inside for the icons. To make the table look more like a button there is a CSS class for colours/borders. A submit area is right at the top (too).
The page can be inspected at http://ask.stroudvoices.co.uk/
It would seem that Android (assume iPad etc also) treat buttons as another kind of <input>, whereas <table> is regarded as <body>.
Sometimes there is a simple answer, from old technology!

I meet a similar problem.What my need is when I tap the submit button and I want to keep the soft-keyboard visible.
Here is my solution.
submit.addEventListener('mousedown', function(e) {
e.preventDefault();
});
I give the submit button a mousedown event, and prevent the default event. it's work on most mobile phones.but in some system found ios 12.1.2 is not available.it's just like the question's owner says, i need to tap twice, one to hide the keyboard, second to reach the submit button.
This confused me and I can't solve it.

Keypress and Keydown generate different behavior

I am trying to create to popup div when pressing enter key, while the div contains a button (that I script to focus when it fired up) that will close the div when you press enter again. I receive the enter key from binding keypress and keydown, end up having different results.
Binding 'keypress'
Things work properly, with first enter key fires up a popup box and another enter key to dismiss the popup box.
Refer this JSFiddle.
Binding 'keydown'
This doesn't work correctly, as it fires up and dismiss the popup box immediately (which you won't see) with only one enter key.
Refer this JSFiddle.
My question is why would keydown generate odd behavior, it is like firing enter key twice for me, but the truth it wasn't. If I remove the button focus(), it will works correctly. That's puzzled me.
Tested with firefox and chrome.

You're rebinding the click event every single time the popup opens, so each time you click the close button it'll fire it multiple times which will cause unexpected behaviour.
Eg:
var Popup = function(){
$('#ok-button').live('click',function(){
$('#popup').remove();
});
};
This code means every time you create a new Popup instance, every single $('#ok-button') that exists will have another click event bound to it.
As for the reason why it immediately closes when you use keydown vs keypress, that's due to the fact that the moment the popup is opened you've set the focus to the button.
The two key events work differently (firing at slightly different times during the key process). It appears that with keydown, you're changing the focus in the middle of the actual action (pressing the button on the keyboard) which then continues and triggers the focused click.
Removing the focus stops the weird double trigger behaviour because you're no longer binding another click event.
I'd suggest changing your click event:
$('#ok-button').live('click', function(){
$('#popup').remove();
});
var Popup = function(){
// Whatever
};
I'd also suggest looking at jQuery's on event instead of using live.

Opening a popbox when clicking a button

The PopBox plugin is useful for having a text area pop up in its own window when you click within a text area. However, I want a PopBox to appear when the user clicks a button, rather than within a text area. Is there a way to modify the PopBox functionality for this?
tl;dr: I want the PopBox to pop when a function is called rather than when clicking inside a text area

If you look at the popBox source, you'll see that when popBox is applied to an element (via $('#yourElement')).popBox(), there is a focus event bound to it:
obj.focus(function () { $(this).next(".popBox-holder").show(); var
popBoxContainer = $(this).next().next(".popBox-container");
// ...edited for brevity...
});
Attach a click event to your button and, within that, trigger the popBox by triggering the above mentioned focus event:
// Attach a click event handler to your button
$('#yourButton').click(function(){
// Trigger the "focus" event on the popBox element
$('#yourElement').triggerHandler('focus');
});
See a working demo here
Obviously, you can modify this to fit your needs - e.g. hiding the initial textarea or input if you don't want it displayed.