'm using a jquery tool called LightBox. Its a tool for displaying images. It works fine but I need to prevent the lightbox functionality from happening if a certain value is returned from an ajax call. Now, this question is not about the ajax call, its about how do I stop LightBox from doing its thing after the link has already been clicked?
This is the link that popups the image using LightBox (it works fine)
<a id="test_id" href="http://localhost/histogram.do" data-lightbox="histogram1"> Click Me </a>
This is my clumsy code to try to stop LightBox from continuing. The alert happens but the lightbox popup still appears right after clicking ok. Any ideas?
$("#test_id").click(function(e){
alert("hello");
e.stopPropagation();
})
That library uses jQuery .on() to bind the click event to the element.
Have you tried e.stopImmediatePropagation() ?
http://api.jquery.com/event.stopImmediatePropagation/
It prevents any other handlers from firing and then calls stopPropagation() to prevent bubbling.
Furthermore, to prevent the element from following the href link on click, you can use e.preventDefault()
http://api.jquery.com/event.preventDefault/
Related
I have an issue with my Javascript not working in Firefox.
I'm fetching images for a page from external sources (IP cameras). Where I am unable to fetch an image, I want to serve my own placeholder image so I don't show the browser default broken image. The solution I have works perfectly in Chrome. However, in Firefox it is automatically loading the missing image - but if I refresh the page it then works perfectly.
The code is:
$(function () {
// Replace Broken Image
$('img').error(function(){
$(this).attr('src', 'https://www.evercam.io/img/error.png ');
});
});
Does any one know why this wouldn't work in Firefox?
Cheers,
Ciarán
it about event binding use on/live instead.
https://api.jquery.com/on/
basicly what happens is it only bind event to imgs already there for more check JS event delegate.
try $(document).on("error", "img", func...);
basically document can be anything (selector, or object) that is a parent of actually element that triggers the event. what happen is with the event bubbling parent click event also get triggered and in the event jquery checks the trigger has given selector.
Cheers.
Based on someone's advice I added this line $('body').on('touchstart', function(event){ event.preventDefault() }) in my mobile webapp to disable the native app bouncing in iOS. It works great for disabling the bounce but gives me some weird behavior elsewhere in DOM.
Click events that don't work, etc. I was hoping to get a better understanding of what this does and how to work around it's effects elsewhere in the DOM.
Thanks!
EDIT:
I have these two lines:
$('body').on('touchstart', function(e){ e.preventDefault() };
$('#home').on('click', function(){ alert('home') };
If I comment out the preventDefault line then the #home line works. If I leave it in the #home line doesn't respond. #home is just a div nested in the body.
Any idea what could be causing this behavior? It's part of a bigger codebase so it;s hard to give you all the details but I don't even know where to start.
Thanks Again!
e.preventDefault() tells the browser that if there is a default behavior for this event on this object, then skip that default behavior.
So, for example, if you had a submit button that the default behavior was to submit a form and you had a click handler on that button that did a preventDefault(), then the browser would not submit the form when the button was clicked. A classic use of this might be when the form doesn't validate so you show the user an error message and don't want the form to be submitted to the server.
Or another example. If you set up a click handler for a link and you call e.preventDefault() in that click handler, then the browser will not process the click on the link and will not follow the href in the link.
To prevent users from submitting a form twice, I disable the submit button after a click with:
$('a').on('click', function(){
$(this).button('option', 'disabled', true);
});
On Chrome, the default action (following the link / executing the JS in the href attribute) is executed. On IE9 however, nothing happens and the button stays disabled. I tried poking around it in the respective JS debuggers and it seems both events are processed in the same phase.
You can see it in action on jsFiddle: http://jsfiddle.net/inerdial/yXWBn/2/
Is there any reason for this behaviour, and/or a workaround less hackish than manually triggering the button's default action somehow?
In case it's any relevant, the submit button is an ASP.NET LinkButton, styled with jQuery UI.
You can try putting that logic into a setTimeout call
You have to set UseSubmitBehavior="false" on the submit button and everything will work as expected.
I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?
It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.
If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");
How can I disable PrettyPhoto after it has been enabled?
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();
}
$("#disablePrettyphoto").click(function (e) {
$("a[rel^='prettyPhoto']").KILLPRETTYPHOTO();
});
On a page with images, where I use Prettyphoto, I need to do some drag and drop action on the same images. Doing this with prettyPhoto enabled is not nice, as it fires the popups when I am dragging and dropping (as it should). So when I enable drag and drop, I want to disable PrettyPhoto and enable it again when I disable drag and drop.
I've had this problem with prettyPhoto as well. I've actually started using the api to have more control over the plugin.
You can, however, use unbind() to remove all click handlers, then do your drag/drop stuff, then add prettyPhoto again. Take a look at this question (Best way to remove an event handler in jQuery?), this should help.
To disable prettyPhoto, unbind the click attribute:
$("a[rel^='prettyPhoto']").unbind('click');
After that, reinitializing prettyPhoto works well for me.
If you don't want to reenable it later, you can destroy it completely by removing rel attribute:
$("a[rel^='prettyPhoto']").attr('rel', '');
(based on this answer)