I have a single modal that is activated by many buttons on my page. There is an event listener on the submit button inside the modal. If I open the modal once, the event listener fires once when the "submit" button is clicked. If I open the modal 3 times, the event listener fires 3 times when the "submit" button is finally clicked.
I thought I could fix this by only setting the event listener on the submit button when the modal is actually shown, but this hasn't helped. I guess I could simply remove the event listener as soon as the modal is hidden, but I think there is a larger memory problem here that I would like to understand. Any thoughts on what's going wrong?
This is executed once DOM content has been loaded.
$('#edit-modal').on('show.bs.modal', function(event){
var modal = $(this);
console.log('Modal is shown');
modal.find("#submit-modal").on('click', function(event){
//do something with form data inside modal
console.log("Submit Clicked");
});
});
Related
I'm trying to implement the following functionality and am having some trouble. What I want is when a user clicks a certain image, a popup div will appear containing some information about that image. Then if the user were to click anywhere on the page outside of that popup div, it would simply hide and then remove the popup.
What I am trying to do is register an eventListener after the popUp div is added to the page. Tried with both jquery and without and am after the same issue. (I included both below but only one is active in the code at a time.)
createProfilePopUpEventListener: function(){
$('body').on('click', function(){
$('.profile_pop_up').fadeOut('fast').remove();
});
},
createProfilePopUpEventListener: function(){
var el = document.getElementsByTagName('body')[0];
el.addEventListener("click", $('.profile_pop_up').fadeOut('fast').remove();
},
showPopUp: function(e){
//creates popUp and adds it to the DOM
this.createProfilePopUpEventListener();
}
What seems to be happening is that the event is being triggered right away on the initial click to show the popup and thus it is never displayed. How can I create an eventListener that only starts listening for those clicks at a certain time?
I guess your problem is event propagation. Your image that is used as the trigger to open the popup bubbles your event up the whole DOM, eventually to the body. Thus the fadeout/remove event is triggered at the same time as your open event.
You will need to stop the propagation of that in such a fashion (using :
$('#popup_trigger').on('click', function(event){
event.stopPropagation();
$('.profile_pop_up').fadeIn();
});
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();
});
I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.
When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});
I have an html page with buttons and such, to which I assign event listeners. Whenever one of the buttons is clicked, the page goes back to its original state, as if the browser had been closed and opened again. So if I have text fields into which I've inputted some info, they will be cleared as soon as a button is clicked, even if its event listener does nothing.
Likewise, if I include this event listener into the html, <body onload="pageLoaded();">, the pageLoaded() function will be called whenever a button is clicked.
Why is this happening, and how can I prevent it from happening?
Presumably you are using submit buttons, which will submit the form they are in unless you cancel the default action.
eventObject.preventDefault();
See the documentation.
Maybe your click event listener was added to a link or a button within a form. If so, you may add return false a the end of the listener to prevent the default behaviour being executed.
var link = $("#mybutton");
link.click(function() {
alert("clicked");
return false;
});
Setting the button type to "button" will resolve this issue. The default type is "submit" which as the others have said will submit the form.
<button type="button">Button</button>
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();
});