I have an on-list with items that I allow users to click on. Clicking on an item takes the user to a details page. If you click fast enough it's possible that two click events get fired taking the user to one details page, then another. Is there a way to prevent this? For example can you tell the navigator to not to push another page until the navigation is complete?
Here is my code called after the list has been populated, assigning the click event:
$( '#myList .item', this ).on( 'click', function() {
navi.pushPage( "details.html" ) );
});
To disable this behaviour you can currently pass {cancelIfRunning: true} as a second argument to navi.pushPage. We are planning on making this the default behaviour soon, which is why it's an undocumented setting, but until then you can just call it explicitly.
navi.pushPage('details.html', {cancelIfRunning: true});
As Fran Dios mentioned - there was an issue with this setting, but it should already be fixed in beta 6.
So as long as you are using OnsenUI beta 6 or higher you should have no problems with this setting turned on. Otherwise you can use Zakaria Acharki's solution.
Try to prevent the double click by adding preventDefault() in dbclick event attached to the list items :
$( '#myList .item', this ).on( 'dbclick', function(e) {
e.preventDefault();
});
Or you could disable the list items for a while after click to prevent the fast double click on different items :
//Example of disabling list for 1 second after click
$( '#myList .item', this ).on( 'click', function(e) {
e.preventDefault();
navi.pushPage( "details.html" ) );
$('#myList .item').prop('disabled', true);
setTimeout(function(){
$( '#myList .item').prop('disabled', false);
}, 1000);
});
Hope this helps.
Related
I'm trying to trigger a click on multiple elements with the same class but when i do so the first element only get clicked and not the others, frankly I'm trying to make likes to all ask.fm profile answers by using the console of firefox so this is what i did
$('.like').trigger('click');
but i realized that only the first element (answer) get clicked so i did something else
$('.like').each(function(){$(this).trigger('click');})
but the problem still exist, os what am i doing wrong here !!
Edit: The html code
all answers got this element in it
<a class="like hintable" hint="Like" href="#" onclick="Like.quickLike(128332156539, "mo7am_rs", "/likes/am77r/question/128332156539/add"); return false;" style="display:block"></a>
and i want to click this element in all answers element
Frankly I'm trying to make likes to all ask.fm profile answers
Your code should work, so, probably they're ignoring/blocking two too consecutive clicks to prevent bots and missclicks.
A workaround to this would be adding a sleep to it (you should adjust the sleep value, because it depends on their secret configured threshold).
The following code would try a click after each 10 seconds:
var sleep = 0;
$('.like').each(function(){
var likeElement = $(this);
setTimeout(function() {
likeElement.trigger('click');
}, sleep);
sleep += 10000;
});
Please, also verify if that practice is compliant to the site's policy.
Try this : write a click handler for all like element and then trigger click event on it.
$(function(){
//register a handler
$( ".like" ).on( "click", function() {
alert( $( this ).text() );
});
//trigger click
$( ".like" ).trigger( "click" );
});
JSFiddle Demo
I'm using the elastic grid plugin for a grid display system on a site, but I want to be able to simply click off the expanded view and it automatically close without having to click on the thumbnail or 'x' button as the plugin suggests.
I've had a bit of a look through the code and think this is where I need to edit
function initEvents() {
//when clicking an item, show the preview with the items info and larg image;
//close the item if already expanded.
//also close if clicking on the item's cross
$items.on( 'click', function(e) {
hidePreview();
return false;
} ).children( 'a' ).on( 'click', function(e) {
var $item = $( this ).parent();
//check if item already opened
current === $item.index() ? hidePreview() : showPreview( $item );
return false;
});
However, I'm not sure exactly how to do this. I was trying to implement this method mentioned here but am having no luck.
Any guidance in this would be appreciated.
The plugin for reference:
http://demo.phapsu.com/jquery.elastic_grid/
if you haven't found an answer yet, add this your js page, it will close the expanded view if you click any where in the page except the expanded view it self.
$('body').click(function(evt){
if(evt.target.class== "og-expander")
return;
// For descendants of menu_content being clicked, remove this
// check if you do not want to put constraint on descendants.
if($(evt.target).closest('.og-expander').length)
return;
$(".og-close").trigger("click");
});
I use iscroll 5 and jquery mobile 1.4.5 for cordoba android app. When I am scrolling page the i have tapped at first on start change state as it is clicked. I dont need it to be clicked if I am scrolling. I need it to change state to active only if I have tapped on it without scrolling.
How can I prevent li button item to change state, I have tried some code I found on stackoverflow but with no success.
$(document).on('tap', function(e) {
$('#lista li').removeClass($.mobile.activeBtnClass);
});
I tried this too, but is deprecated
$( document ).on( "mobileinit", function() {
$.mobile.activeBtnClass = 'unused';
});
I want to nest one .click() event with another but its not working. I looked at the .on() event, but I don't think its what I need. Below is basically what I have so far, but its not working as intended.
I want to click on the 'adress1' button, get directed to the next page where I either click the 'profession1' button or the 'profession2' button, and depending on which of the last two buttons is clicked, something respective happens.
//HTML code for first button
adress1
//HTML code on a different page for last two buttons
profession1
profession2
//Javascript/JQuery code
$("#adress").click(function(){
//Some action here based on #address click event
$("#profession-1").click(function(){
//Some action if #profession was clicked after #address
});
$("#profession-2").click(function(){
//Some other action if #profession2 was clicked instead
of profession1
});
});
Someone had told me to use the following:
$('#adress').on('click', '#profession-1', function() {alert("x1")}).on('click', '#profession-2', function() {alert("x2")});
but its not working either. I feel like my program is not registering the click.
Your help is much appreciated!
The "root" element, in this case #address, isn't a proper element to attach the click event. You want to attach to some parent element and target a child element. Events in JavaScript bubble up and trickle back down to the element that initiated the event Event Propagation.
To remedy the issue:
$('#someParentEl').on(
'click',
'#profession-1',
function() {alert("x1")}
).on(
'click',
'#profession-2',
function() {alert("x2")}
);
Further Reading:
http://www.quirksmode.org/js/events_order.html
https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
http://learn.jquery.com/events/event-delegation/
The best way to accomplish something like this, is to have data attributes store whether or not something was clicked on... assuming this is a single page web app. Also make sure each id is unique, and referenced correctly for each click event.
address1
Then, when you click on that element, check if the data attribute is true or not on each click of the other elements.
$("#address").click(function(){
if($(this).attr("data-clicked") == "true") {
$(this).attr("data-clicked","false")
} else {
$(this).attr("data-clicked","true")
}
});
$("#profession-1").click(function(){
if($("#address").attr("data-clicked") == "true") {
//Some action
}
});
$("#profession-2").click(function(){
if($("#address").attr("data-clicked") == "true") {
//Some action
}
});
None of this was tested, but it should point you in the right direction.
I used the methods in this question:
change div class onclick on another div, and change back on body click
So here's my jQuery function:
jQuery('.checkbox_wrapper').on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
However it doesn't seem to be working properly. It takes multiple clicks before the class changes.
See my jsfiddle:
http://jsfiddle.net/7A3vw/
I cut it down to the bare essentials thinking it might be conflicting javascript, but even with the single function it takes multiple clicks before the class actually changes. Because the production environment has 1 click toggle a hidden checkbox, multiple clicks is not reasonable.
Could someone help me figure out what's causing this issue?
The click function fires twice, once for the image, and once for the input, as both will bubble to the parent element, and firing twice reverts the classes again (proof).
Just target the image instead, as that is what you're really trying to click, not the parent :
jQuery('.deck_card img').on('click', function (e) {
jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});
FIDDLE
i guest you need the checkbox checked together with the toggling of your div.
$(document).ready(function(e) {
$('.checkbox_wrapper').on('click', function(e){
var checked = $(this).find('input[type="checkbox"]').is(":checked");
if(checked){
jQuery(this).parent().addClass('selected').removeClass('not_selected');
}else{
jQuery(this).parent().addClass('not_selected').removeClass('selected');
}
});
});
Your code is triggering click event twice. So use .preventDefault()
This makes the default action of the event will not be triggered.
$('.checkbox_wrapper').on('click', function(e){
$(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
e.preventDefault(); // prevent the default action to be
}); // triggered for next time
Check this JSFiddle
try this
jQuery(document).on("click",'.checkbox_wrapper', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
Multiple Clicks are getting triggered because you are using class selector. You need to use not to exclude extra elements :
jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected selected')
});
Here is a FIDDLE.