I'm implementing a plugin to load youtube videos in a modal (https://appleple.github.io/modal-video/). The problem is with the cross button in the modal.
If I do not refresh the page, click the cross button on the modal and then click on the video again, the click event fires twice instead of once ie. I get two modals.
My JS for running this is fairly simple:
HTML code:
<a id="runVideo" data-video-id='XXXXXXX' class="white">
<span class="glyphicon glyphicon-play-circle"></span> Want to know how we do that? Watch our video.
</a>
JS code:
$( "#runVideo" ).click(function(event) {
event.preventDefault();
event.stopPropagation();
console.log("mydick");
$("#runVideo").modalVideo({channel:'youtube'});
});
So, if you ever want some click event to happen only once, we gotta unbind the click handler everytime it is clicked. So, something like this worked out
$('#runVideo').bind('click', function() {
$(this).unbind('click');
alert('Clicked and unbound!');
$("#runVideo").modalVideo({channel:'youtube'});
});
Related
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
I am trying to do a postback when clicking on a link that opens a popup window modal. I have tried __doPostBack() with no luck. Once I remove the two attributes data-target="#Modal" data-toggle="modal" PostBack works but my popup window will not work of course.
link
How can I keep my modal and do a postback when opening it?
Please help this newbie
I think you can use an event when your modal is opened, like this:
$('#NotesModal').on('show.bs.modal', function (e) {
// do something...
});
Removing the attributes data-target="#Modal" data-toggle="modal" your anchor will not show anymore the modal. And this is normal.
In this case you can add a click event listener to your anchor so that after dopostback you can show your modal with:
$('#OpenNotes').on('click', function(e) {
do your postback....
$("#Modal").modal('show');
});
For details see the documentation
I am working on an application and need to open a modal, have the user fill in some details and save them once they click the modal button i have designated. I have used jQuery on to bind a click event for the button. problem is the click event is triggered when the modal opens.
Relevant parts of modal:
<div class="modal-footer">
Close
Save Event
Where i bind the event:
$('#save-event').on(
'click',
function(evt)
{
console.log('triggered');
}
);
The console shows 'triggered' when i open the dialog. I open the dialog through:
{% trans "Event also occurs on" %}
Its a Django app so the curly braces. Any ideas what i could be doing wrong or is there another way to execute some logic once the user clicks the relevant button?
You might be having 2 elements with the same id in the html and you are getting the event triggered when you are clicking on the other element.
Try adding the following to your jQuery code:
evt.stopPropagation();
Sorry, should clarify, add this to the code triggering the modal opening.
Edit: since you don't have direct access to the modal code, try the following in your jQuery:
$('#add-event-modal').on('click', function(evt) {
evt.stopPropagation();
});
The title is a bit confusing but here's what I want to do -> There's a picture. When you click on it, a lightbox pops up (I already have that event). However, if you right click it and open in a new tab, I want a page to appear. Instagram has something similar to what I'm looking for. <a href=""> doesn't work - it executes both (launches the lightbox and redirects). How do I do that? Is there a way to cancel the href? Thanks.
EDIT: Here's a visual: http://jsfiddle.net/9VFGS/. In that case, I only want the alert() to be invoked when I click on it, but when I open it in a new tab, I want it to navigate to google.com.
Using event.preventDefault() (doc) in the event handler for triggering your lightbox will prevent the link from executing and changing your window location. Right-click context actions should still work, though, because they don't trigger click events.
$( '#my-link' ).on( 'click', function( event ) {
event.preventDefault();
// do my lightbox stuff here
}
Yes, set href="..." to href="#".
I have a gallery type of interface that I'm trying to get to work, I want to be able to click outside of it to close it, however there is a div inside that contains the main elements, photos, and things to click. However as it is now when you click inside the div it closes, because it's a child in the element that when you click it closes.
I have the divs like this:
<div class="theater-wrapper">
<div class="theater-container"></div>
</div>
everything is loaded into theater-container via ajax.
When you click .theater-wrapper it should fire the event to close, however when you click theater-container it shouldn't.
This is how I have tried to close it:
$(".theater-wrapper").click(function (event) {
$('.theater-wrapper').hide();
event.stopPropagation();
});
I have a jsfiddle showing this in action: http://jsfiddle.net/Cs8Kq/1/
If you want to stop propagation of the click event on .theater-container, then that's where you need to put the command. Right now you have it applied to the .theater-wrapper click action.
$(".theater-container").click(function (ev) {
ev.stopPropagation();
});