I'm binding my tab events like this:
$('#submit').on("tap", function(){
$("body").pagecontainer("change", "#page-2");
});
My Problem is that the tab event fires automatically on the same position on the next page.
So when I got 2 buttons on the same positions on two different pages and I click/tab on the first button, the view slides to the next page and the event fires on the second button too.
This is only happening in iOS7. Any idea what i'm doing wrong?
(jQuery mobile version 1.4.2)
No idea if this will solve your problem or not, but you should probably be accepting an event parameter and preventing the default action if the click target is a button in a form or an anchor tag. You might also want to prevent the event from bubbling up by using stopPropagation. Depending on the underlying element you may actually be seeing the effect of the default action for that element or getting a full page refresh. That might have the appearance of the other action being invoked.
$('#submit').on("tap", function(e){
e.preventDefault();
e.stopPropagation(); // and also maybe prevent the event from bubbling up
$("body").pagecontainer("change", "#page-2");
});
Related
I've created a javascript pop up contact form, how do I trigger this after clicking a WordPress navigation item?
I have already tried the following code which works fine. However, after 1 second it loads the page which I've set the nav item to in WordPress.
document.getElementById('menu-item-177').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden')
});
I tried deleting the page, but obviously the nav link disappears. I also tried removing the menu item in the Menu settings of WordPress, same outcome.
I somehow need to block the page loading when the nav link is clicked. Is there a way round this?
Make sure that you are selecting the <a href=".. anchor element and listen for the click on that. I see that you have jQuery loaded in, so it might be good to just use that, or don't use it at all.
In your click event listener you listen for a click to happen. Whenever this click happens the function in the listener will be called. This function exposes some information about the event in the Event object. You'll see this in other pieces of code named e, evt, event or something else to refer to this Event object.
The Event object has a method called Event.preventDefault() which stops the browser from executing any kind of behavior that is linked to that element. Like navigating with an <a> tag. See why it is important to know what element you are clicking on? By adding that you can add your own behavior. See the example below.
$('#menu-item-177 > a').on('click', function(event) {
event.preventDefault(); // Prevents default navigation behavior.
$('.bg-modal').css('display', 'flex');
$('body').css('overflow', 'hidden');
});
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
In my jQuery Mobile project I have an element #sidebar with a toggle icon.
In my base file, just under the #sidebar div I use the following code:
Toggle sidebar
<div id="sidebar"> ... </div>
$('#toggle-sidebar').on('click', function() {
$('#sidebar').toggleClass('visible');
});
When my page loads for the first time, toggling works perfectly fine. However, when I change pages via my main navigation the toggling does not work anymore. I put an alert inside the click function and realized that AFTER page change the alert gets executed multiple times, namely as many times as I changed the page before.
The toggling works again when I move to the other page by entering the URL in my browser and loading the page.
How can I solve this problem?
If the alert executes many times on click after changing the page it may suggest that you have new click event listener bound on every page change. Try to unbind the click event listeners on that element before binding your click listener, to avoid such situation. Sth like that:
$('#toggle-sidebar').off('click');
$('#toggle-sidebar').on('click', function() {
$('#sidebar').toggleClass('visible');
});
It may resolve the issue.
You may also take a look at jQuery event namespaces https://api.jquery.com/event.namespace/. And add namespace to your click event so it won't unbind other click events on that element that may possibly appear in the code someday.
Some code that looks like the following is firing the click event via the Enter key, but is not responding to the mouse click.
//a is an anchor element
a.addEventListener('click', function (e)
{
//Do Stuff...
});
This page demonstrates the problem. The relevant bit of code is at line 176. This is in the middle of development and currently only (sort of) works in Chrome.
Also, I just verified that it works if I use mousedown, so it's not just the case of an invisible element sitting in front of the anchor.
Any ideas?
Edit: Now that you've shown us the actual code you're using, the problem is related to the fact that the autoSuggest() function has it's own click handler and in that click handler, it is clearing the container which removes all <a> elements in the container so your link object gets destroyed (probably before your click event gets to process). So, you can get events that happen before the click (like mousedown), but after a click, the element is removed from the DOM.
If you tell us what you're trying to actually do when an auto-suggest item is clicked that is different than the default behavior of the autoSuggest() function and you point to any documentation for that function, then perhaps we could offer a better way to solve your issue.
The link may be firing and taking you off to a new page (or reloading the current page), thus preventing you from seeing the click code run. Usually when you process a click event on a link element, you need to prevent the default behavior:
//a is an anchor element
a.addEventListener('click', function (e) {
e.preventDefault();
//Do Stuff...
});
Another possibility is that you are trying to install the event handler too soon either before the DOM has been loaded or before this particular link has been created and thus no actual click event handler is attached to the DOM object. You can verify whether the event handler is even getting called by temporarily putting an alert("Click handler called"); in the event handler and see if that pops up or not.
I have a anchor on which I trigger a click with JavaScript. Please see this fiddle.
$(function() {
$('a').click();
});
For some reason, triggering the click does not bring me to the page specified by the href attribute of the anchor.
How can I have the click event also bring me to the page linked by the anchor?
It will not work like that, the call $('a').click(); is a short cut for $('a').trigger('click'); which tries to simulate a click action on the anchor element.
But the simulation is not absolute, though it will fire the registered event handler it will not completely simulate a use click trigger the default action.
As per the jquery doc for trigger
Description: Execute all handlers and behaviors attached to the
matched elements for the given event type.
and
Although .trigger() simulates an event activation, complete with a
synthesized event object, it does not perfectly replicate a
naturally-occurring event.
So I don't think it is possible to completely simulate a user action and trigger a redirection using this method
Seems to be something to do with jQuery and the trigger method, works fine when you change [object object] to [object]. Here is the fiddle. Enjoy!
$(function() {
$('a').get(0).click();
});