I have recently included a CodePen demonstration
My goal is to have the lightbox close upon clicking the close button. The current issue I am facing is that the close function is only triggered when clicking on the background.
I seem to be missing something in my code.
Here are the selectors I have attempted so far, but have not successfully triggered the closing function:
$('.lightbox-item > .close-button')
$('.lightbox-item .close-button')
$('.close-button')
To ensure the proper functioning of your code, it is recommended to bind the click event on the document using
$(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); });div lightbox-item is empty when you execute $('.lightbot-item .close-button').click(function(){ closeLightbox(); });If you prefer, you can also attach the click event after appending the content within the openLightbox function. In this case, the code would appear as follows:
$(".lightbox-item").append(content);
$('.lightbox-item .close-button').click(function(){ closeLightbox(); });
I have provided a modified version of your pen implementing the first recommendation for your reference.
What is the process for loading assets in an Angular app? Will the app wait for all assets to load before bootstrapping, or will they be lazy loaded if not needed on the initial page? I have a large number of PDFs stored in the assets folder that I load a ...
Within my HTML form, there is a field labeled value. Alongside this field, there is an add button. When I click the add button, it duplicates the form field. My code is set up so that when I input a value (let's say 40) into the form field, then click ...
Recently, I have been diving into learning Vuex and creating an authentication module. Following a tutorial, I reached a point where I needed to use the store in the router. However, after importing my store at the top of the router index.js file, I notice ...
I am a beginner when it comes to javascript & jQuery. I am currently working on a feature for my website where users can display badges they have earned on their own site by simply copying and pasting a bit of code that I provide. Although the javascript p ...
My friend and I have been brainstorming a business idea that involves using Discord as our platform. While I am somewhat new to coding, I do have some knowledge in Discord.js, Java, and HTML. Here’s the plan: We will have a website where users can purch ...
I am currently facing an issue with sorting percentages in a table column. Despite using methods like parseFloat and other AngularJS (1.5.0) sorting techniques, the percentages are not being sorted as expected. [ {percentage: 8.82} {percentage: 0. ...
Encountering an issue with my multiple SQL queries in Node.js while using the MySQL module. Even if the user exists, a new user is being created, indicating a potential problem here : if (rows[0].exist == "0") { // if not exist, create it (already authent ...
$.ajax({ xhr: function() { var xhr = new XMLHttpRequest(); //Track upload progress xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Hand ...
I am trying to send a JavaScript string to PHP immediately after the code within the script tag. <script type="text/javascript"> var myvar = "mytext" ; <?php echo myvar ; ?> </script> Unfortunately, this approach is not functioning ...
Attempting to navigate back to the previous page is not functioning properly. Instead, I am encountering an error message that states: "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be null (Connection: mysql, SQ ...
I am working with an SVG path and I need to find all the extremum points (corners) on this path. How can I achieve this? I attempted to retrieve all points using the following code: let totalLength = path.getTotalLength(); for (var i = 0; i < totalL ...
Is it possible to make an API call using axios based on the response of another initial API call, all within asynchronous functions? I attempted the following approach with await/promise: function fetchUserDetails(userId) { return axios.get( "https://a ...
I am looking for a solution to automatically fill and submit a form from a specific URL, as I need to trigger this process from my domoticz. Despite attempting different methods like using AJAX or injecting JavaScript, I keep encountering issues with the S ...
I'm attempting to transform this shining button from a codepen I discovered into a svelte component, but for some reason the sparkles don't appear. I'm unsure if it's relevant, but I'm also utilizing Tailwind CSS, so my style tag h ...
Looking to compare two arrays and update them with matching keys while adding 0 for non-matching keys. For example: let obj1 = [ {"type": "Riesenslalom","total": 2862}, {"type": "Slalom", "total" ...
When you visit this page and scroll down a little before clicking on one of the art pieces, have you noticed that the "fixed" lightbox seems to be attaching itself to the top of the page instead of the viewport? I'm looking for ways to make it attach ...
In my jQuery ajax code, I created a FitnessPlanDay: // Add Day ajax $('#addDay').on("click", function() { $.ajax({ url: '@Url.Action("AddDay")', type: 'POST', ...
I'm having trouble accessing a JSON api from a specific adult-themed website. I've been trying to make it work but so far no luck. You can find my code snippet in this jsfiddle: http://jsfiddle.net/SSqwd/ and here is the script: $.ajax({url: &ap ...
I am currently working on a project that involves creating two pages. The first page will display a selection of items that I want to showcase on the second page. On the initial page, I have already picked out the specific items that I plan to show on the ...
I'm attempting to extract a value from the JSON data retrieved via Ajax. Take a look at the example I'm working on here: http://jsfiddle.net/NNrcp/6/. jQuery.ajax({ url:"http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20geo.pla ...