All geek questions in one place

Linking dynamically created elements in jQuery

The following code is pretty clear, but I ran into a problem linking the click event to the element that was created.

On line 25, you can see the div with the identifier "overlay". Then I set the css properties.

Then, on line 65, I link the click to cause the modality to be hidden. The problem is that it does not work. If I put the div in html, then .click will work as expected.

Any help is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Modal</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { // Select the link(s) with name=modal $('a[name=modal]').click(function(e) { // Cancel the link behavior e.preventDefault(); // Get the id of this link associated content box. var id = $(this).attr('href'); // Find the screen height and width var overlayHeight = $(document).height(); var overlayWidth = $(window).width(); // Create the overlay $('body').append('<div id="overlay"></div>'); //Set css properties for newly created #overlay $('#overlay').css({ 'width' : overlayWidth, 'height' : overlayHeight, 'position':'absolute', 'left' : '0', 'top' : '0', 'z-index' : '9000', 'background-color' : '#000', 'display' : 'none' }); // Get the viewpane height and width var winH = $(window).height(); var winW = $(window).width(); // Center the modal $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); // Transition effects for overlay $('#overlay').fadeIn(1000).fadeTo(1000,0.8); // Transition effect for modal $(id).fadeIn(1000); }); // Close link click = trigger out $('.modal .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#overlay').fadeOut(1000); $('.modal').fadeOut(200); }); // Overlay click = trigger out $('#overlay').click(function () { $('#overlay').fadeOut(1000); $('.modal').fadeOut(200); }); // Load rules in to modal $('#rules .text').load('rules.html'); }); </script> <style type="text/css"> .modal{ position:absolute; display:none; z-index:9999; } #rules{ width:600px; height:400px; } #rules p{ background: #fff; margin: 0; padding: 0; } #rules .head{ background: #ddd; text-align: right; padding: 0 10px; height: 30px; } #rules .text{ height: 370px; padding: 0 20px; overflow: auto; } </style> </head> <body> <p><a href="#rules" name="modal">Open Modal</a></p> <div id="rules" class="modal"> <p class="head"><a href="#" class="close">close</a></p> <p class="text"></p> </div> </body> </html>
+3
source share
5 answers

The click event for the overlay is bound before the element exists. You need to use live snapping to maintain the snapping - otherwise you will have to snapping every time you create an element. Just change your function to use live() as follows:

 $('#overlay').live('click', function () { $('#overlay').fadeOut(1000); $('.modal').fadeOut(200); });

The click event for .modal .close works as it is defined in the DOM when the event is connected.

Binding to a normal event considers only those elements that currently exist in the DOM, and events related to live() also work with all future elements that correspond to the selector.

+5
source 
  // Overlay click = trigger out $('#overlay').click(function () { $('#overlay').fadeOut(1000); $('.modal').fadeOut(200); });

fired when the page loads, when the #overlay element does not exist. If you move this piece of code inside the $('a[name=modal]').click(function(e) { but after the $ ('body').append('<div id="overlay"></div>'); it should work.

0
source

If you programmatically create #overlay, you need to associate it with $ .live ();

 $('#overlay').live("click", function () { $('#overlay').fadeOut(1000); $('.modal').fadeOut(200); });

This binding method binds to all existing and future elements that match the provided selector.

0
source

Using the .live () method, it will work with any elements that you add to the DOM after loading it.

 // Overlay click = trigger out $('#overlay').live('click', function () { $('#overlay').fadeOut(1000); $('.modal').fadeOut(200); });

Another way to do this is to attach it to the click when it is added (inside the click handler for $ ('a [name = modal]').

You should probably also change $ ('# overlay'). fadeOut () - $ (this) .fadeOut ().

0
source

Keep in mind that your code will create a new overlay each time you click a[name=modal] ..

Either remove the overlay element from the DOM when you are done with it, or create it outside of the click and just show / hide it in the click event.

A particular problem is that you bind the click event to the overlay before it is created (since you will create it after clicking the link ..)

0
source

Source: https://habr.com/ru/post/1309836/

More articles:


All Articles