I'm building mobile theme using jquery-mobile.
//Swipe to reveal delete icon
$(".swipe-delete li").on("swipe", function(e) {
$(".swipe-delete .delete").remove();
$(this).find(".ui-btn-inner").append('<div class="delete">Delete</div>');
});
//Click to delete fav from list
$(document).on("click", ".swipe-delete .delete a", function() {
$(this).closest("li").remove();
});
//Currently playing
$(".ui-listview li").on("click", function() {
$(".ui-listview .playing").remove();
$(".swipe-delete .delete").remove();
$(this).find(".ui-btn-inner").append('<div class="playing">Playing</div>');
});
So, I'm implementing swipe to delete a button. It works correctly until I enable currently playing section. When it is enabled, whenever I try to click the delete button the event is intercepted by currently the playing function and method remove() doesn't get invoked.
To see it in action please visit this site.
And click "favorites" in the footer. Swipe on the listview to show delete button. Try to click it and you will see that play button appears instead of removing it.
Since the delete handler is bound to the document, the event doesn't reach there until after the click handler for the "currently playing" section has run, removing the element that would cause the event. There are a few ways to go about fixing this, but this is probably the simplest:
//Currently playing
$(".ui-listview li").on("click", function(e) {
// if the target of the event was the delete button, don't to anything
if ($(e.target).is('.swipe-delete .delete a')) { return; }
$(".ui-listview .playing").remove();
$(".swipe-delete .delete").remove();
$(this).find(".ui-btn-inner").append('<div class="playing">Playing</div>');
});
You can use the stopPropagation() method.
So change your remove function to this:
$(document).on("click", ".swipe-delete .delete a", function(e) {
e.stopPropagation();
$(this).closest("li").remove();
});
Related
On first click my button click function works, but upon clicking again it refreshes the page click the unbind isn't recognized. I need to prevent any default click event as well as disable the button after click.
Save this Property
$(".red-btn2").click(function(event){
event.preventDefault();
$(this).unbind('click');
$(this).css({
'background-color':'#666666',
'text-align':'center'
});
$(this).text("Added to Favorites");
});
If you need the rest of the handler to run only once, but preventDefault() always, you can separate them into multiple handlers.
Then, one of them can be removed after its first use (using jQuery's .one() will cover that for you), still leaving the preventDefault() in use:
$('.red-btn2')
.click(function (event) {
event.preventDefault();
})
.one('click', function () {
$(this).css({
'background-color':'#666666',
'text-align':'center'
});
$(this).text("Added to Favorites");
});
As you have it, the event.preventDefault() is being removed as well by .unbind('click'), so no functions are left on the element to call it for the 2nd click.
When you unbind the handler, the button will function as normal on any subsequent click, and initiate a navigation. So you better really set the disabled property:
$(".red-btn2").click(function(event){
event.preventDefault();
if ($(this).prop('disabled')) return; // <---
$(this).prop('disabled', true); // <----
$(this).css({
'background-color':'#666666',
'text-align':'center'
});
$(this).text("Added to Favorites");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Save this Property
Note that event.preventDefault() actually works. It was only on the second click you had issues, because the link was still clickable, but your function was detached from it, so you had no control over that second click.
I have several DIV of the following kind on my page:
<div class='entry'>
This is a statement
<a title="Search #travel" class="app-context-link" href="">#travel</a>
</div>
When a DIV of class .entry is clicked I trigger the following:
$(".entry").on('click', function(e) {
console.log("DIV Clicked");
});
When a link of the class .app-context-link is clicked I trigger the following:
var context_links = document.getElementsByClassName('app-context-link');
for (var k=0;k<context_links.length;++k) {
context_links[k].addEventListener('click', function(e) {
console.log("The context link inside DIV is clicked");
});
}
The question:
Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).
How do I make it that if the link is clicked the DIV on click jQuery is not triggered?
I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.
Thank you!
you can use like this
$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});
DEMO
Use stop propagation :
context_links[k].addEventListener('click', function(e) {
e.stopPropagation(); //Here
console.log("The context link inside DIV is clicked");
});
This will stop the click event from bubbling, so when you click on the a, click events of its ancestor will not trigger.
I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});
Maybe I'm, just tired but I have a right click menu that I want to close when the user clicks anywhere else than the menu. But I cant figure out how to make it disappear when the user clicks on something else.
Here is the code for showing the menu:
// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
// if right click
if(event.which == 3) {
showRightClickMenu(event);
}
event.preventDefault();
event.stopPropagation();
});
And this is what I got for hiding the menu
// If mouse click outside document
$(document).bind('blur', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
The first bind checks if the user clicks outside the document and the second bind checks if the user clicks on everything except the menu.
But the second one doesn't really work. If I click on the menu the menu is hidden.
Shouldn't be so hard imo... Anyone got any ideas?
Try it this way
$(document.body).bind('click', function() {
hideRightClickMenu();
});
$(window).bind('blur', function() {
hideRightClickMenu();
});
Try with focusout() event and using on() instead of old bind(). This will work even with multiple submenus.
http://jsfiddle.net/elclanrs/jhaF3/1/
// Something like this...
$('#menu li').on('click', function() {
$(this).find('ul').show();
}).find('ul').on('focusout', function(){
$(this).hide();
});
I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.