Creating a DIV with jQuery and have its parts be linked to other Jquery functions

Question

Okay so I'm building a custom Wordpress theme and I need a custom modal window (div) to appear when a user clicks a certain link on my page. I designed the modal window, and linked certain parts of it (such as 'X' button to close) with jQuery functions.

Works fine when I put the div onto the page itself, but when I try to create that same DIV with a separate jQuery function which gets called when a user clicks the link, it creates and displays that div, but the function for the 'login-close' class link does absolutely nothing this time.

Here's how I create the DIV with jQuery:

var passion = jQuery(this).attr('data-passion');

var div = $('<div id="itinerary-modal"> <a class="login-close" href="#"><i class="fa fa-times"></i></a> <p>You have successfully added<br> <span>'+passion+'</span><br> to your wishlist. </p> <a href="" class="btn">See my wishlist</a> <a href="#" class="btn">OK</a> </div>');

$("#content").append(div);

div.show(); /* "itinerary-modal" is display:hidden in CSS */

This is of course all embedded in a link.click jQuery function. As I said, displays the div just fine but I want it to function (close on 'login-close' class link) as it did when it was placed on the page as pure HTML.

you can use jQuery(this).data('passion') instead of .attr('data-passion') — Bhojendra Rauniyar, Jan 09 '14 at 10:08
You should keep in mind that event-listeners must be set after you have appended the html code into your document. — 0x_Anakin, Jan 09 '14 at 10:10
I think you need to include the code and hooks up an event listener to the — Jazzepi, Jan 09 '14 at 10:14
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Jan 09 '14 at 10:24

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Yep the answer is on the link Barmar posted. Use .on().

edited May 23 '17 at 11:49

Community

1
1

answered Jan 09 '14 at 11:59

theleebriggs

571
2
5

Creating a DIV with jQuery and have its parts be linked to other Jquery functions

1 Answers1