I'm trying to determine why something like this doesn't work:
$('a').focus( function() {
$(this).click();
});
Background:
I'm trying to create a form in which tabbing to various elements (e.g. textboxes, etc.) will trigger links to anchors in a div, so that relevant text is scrolled into view as the form is being filled out.
Is there a better way to do this?
$('yourInput').on('focus', function(){
$('yourAnchor').trigger('click');
});
should work just fine, however you are likely to loose focus on the input field as the new element has been 'clicked'. I would recommend using the jQuery scrollTo plugin instead. That would enable you to do something like this:
$('yourInput').on('focus', function(){
$('messageArea').scrollTo('yourAnchor');
});
This was scrolling occurs in a nice animated fashion and without triggering browser events.
Part of the reason the code you posted may be failing is that, 1. anchors do not always have a focus event, 2. clicking it right after focusing may be redundant and not causing the change you are looking for.
Related
I've read quite a few things on stack related to this issue, but I can't seem to solve my problem.
Essentially, I'm using jQueryModal (http://jquerymodal.com/).
What I want to have happen is, when the modal is launched, aka:
$(".buttonSpacing").click(function() {
$("#page").modal();
}
the modal opens up as expected. Contained in a div in that modal is a contenteditable div. Basically, I want to prevent default on everything except the contenteditable div. When the modal closes, I want events to then be unbound.
Something like this:
$(".buttonSpacing").click(function() {
$("#page").modal();
$(':not(#myContentEditableDiv)').bind('mousedown',function(e)
{
e.stopPropagation(); // Tried with and without this line
e.preventDefault();
});
}
doesn't seem to work. #myContentEditableDiv loses the default functionality as well as everything else.
If a previous question has answered this, I guess I wasn't able to apply it correctly to my situation.
The reason for this is I want the cursor to always remain in the editable area, wherever it is they left it, even when I'm having them select things to dynamically add to the editable area, or if they accidentally click outside of it.
Given my situation, how can I make this happen?
Thanks for your help.
EDIT:
Here's a js fiddle showing the problem:
https://jsfiddle.net/7Lwudpr4/2/
The problem is that the mouse down event is propagating from the text area to the parent elements, which are then preventing the default action. To fix this issue, add the following:
$('#textArea').bind('mousedown', function(e) {
e.stopPropagation();
})
Updated JSFiddle: https://jsfiddle.net/gp43028d/1/
Note that you'll probably need to handle the mouseup events on your other elements, as they won't fire click events since preventDefault() is called on the mousedown event.
After page load I set that all anchors should block screen using the plugin jquery-blockui so as to prevent multiple clicks from impatient user and avoiding unnecessary multiple requests to the server.
$("a").on("click", $.blockUI);
I'm also using the jquery ui multiselect widget and this widget uses anchors to check all options, uncheck all options, or close itself. Unfortunatelly, these anchors also fires my blockUI event. I tried to prevent the event from firing using the code below:
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", function(e) {
e.preventDefault();
});
In other words, I tried to stop the default event of the anchors marked with the widget classes, but that did not work. What actually worked was what I used below:
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", $.unblockUI);
But this solution gives an effect on the screen as if it is flashing. Is there any way to make these links simply do not trigger the blockUI differently from every other anchors being an UX exception in the system?
If you never want those objects to trigger the blockui call, don't place the event listener on them in the first place. Use jQuery's :not selector:
$("a:not(.ui-multiselect-none, .ui-multiselect-all, .ui-multiselect-close)").on("click", $.blockUI);
You can do it in two steps. First, remove all handlers from the click event:
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").off('click');
Then, optinally, assign your own handler to prevent later bindings
$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", function(e) {
e.preventDefault();
});
You have two options
1) Create a new target for blockUI
$("a").on("click", $.blockUI); // Change "a" to something else like "a.target"
2) Change a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close to perform the same functionality without the need of being anchortags.
I've written an html5 application which is supposed to work on mobile devices. 90% of the time it works fine however in certain devices (mostly androids 4.0+) the click events fire twice.
I know why that happens, I'm using iScroll 4 to simulate native scrolling and it handles the events that happen inside the scroll.(line 533 dispatches the event if you're interested) Most of the time it works fine but in certain devices both the iScroll dispatched event and the original onClick event attached to the element are fired, so the click happens twice. I can't find a pattern on which devices this happen so I'm looking for alternatives to prevent double clicks.
I already came up with an ugly fix that solves the problem. I've wrapped all the clicks in a "handleClick" method, that is not allowed to run more often than 200ms. That became really tough to maintain. If I have dynamically generated content it becomes a huge mess and it gets worse when I try to pass objects as parameters.
var preventClick = false;
function handleClick(myFunction){
if (preventClick)
return;
setTimeout(function(){preventClick = true;},200);
myFunction.call():
}
function myFunction(){
...
}
<div onclick='handleClick(myfunction)'> click me </div>
I've been trying to find a way to intercept all click events in the whole page, and there somehow work out if the event should be fired or not. Is it possible to do something like that?
Set myFunction on click but before it's called, trigger handleClick()? I'm playing with custom events at the moment, it's looking promising but I'd like to not have to change every event in the whole application.
<div onclick='myfunction()'> click me </div>
You can do that with the following ( i wouldn't recommend it though):
$('body').on('click', function(event){
event.preventDefault();
// your code to handle the clicks
});
This will prevent the default functionality of clicks in your browser, if you want to know the target of the click just use event.target.
Refer to this answer for an idea on how to add a click check before the preventDefault();
I don't like events on attributes, but that's just me.
Thinking jquery: $(selector).click(function(){ <your handler code> } you could do something like:
$(selector).click(function(event){
handleClick(window[$(this).attr("onclick")]);
};
of course, there wouldn't be any parameters...
Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline select and when I make changes (click on elements), it does not change until the select box loses focus. So I'm trying to force a blur every time the select box is clicked. That way if it changes, it will trigger the changed event. If it doesn't change, nothing will happen.
How do I do this? Am I even approaching this the right way? Jquery answers are okay as well.
In addition to Ender the full code could be something like this.
$('#mySelectBox').change(function() {
$('#thingToBlur').blur();
})
Reference: http://api.jquery.com/blur/
This will find the element with the focus and trigger the blur event.
function blur(){
document.querySelectorAll('input,textarea').forEach(function(element){
if(element === document.activeElement) {
return element.blur();
}
});
}
Using jQuery do:
$('#mySelectBox').change(function() {
//do things here
});
According to the documentation at http://api.jquery.com/change/, the event is triggered immediately when the user makes a selection.
Check out this demo to verify that this works: http://jsfiddle.net/AHM8j/
You could attach an onclick handler to the select and the individual options. basically onclick="this.blur();". I've always found that click events on <select> elements to be a pain, as nothing happens at the point you expect it to.
Okay, Here's what was going on. I was including the -vsdoc version of JQuery instead of the actual JQuery library. This also fixes some issues I was having with some plugins such as blockUI.
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.