I'm currently in the process of creating a website with various widgets that I want to be able to add/remove on the fly.
I'm using jQuery to achieve this(planning to at least).
The simplest widget is the login widget. Which looks like this:
<div id="widget1">
<div class="close"></div>
<div id="widget1_title"></div>
<div id="widget1_content">
<form method='post' action='index.php'>
<div id="widget1_username">
Username<input type='text' maxlength='16' name='user' value='' />
</div>
<div id="widget1_password">
Password<input type='password' maxlength='16' name='pass' value='' />
</div>
<div id="widget1_submit">
<input type='submit' value='LOGIN' />
</div>
</div>
</div>
This is stored in a file called login_widget.html. Since a login-widget is something that should be preloaded on the site(without the user having to bring it up) I have my index.php file looking like this:
<body>
<div id="container">
<div id="content">
<div id="sidebar">
<div id="login-sidebar"></div>
</div>
<div id="header">
<div></div>
<div></div>
<div id="header-logo"></div>
</div>
<div id="main-content">
<div id="widget1">
<div class="close"></div>
<div id="widget1_title"></div>
<div id="widget1_content">
<form method='post' action='index.php'>
<div id="widget1_username">
Username<input type='text' maxlength='16' name='user' value='' />
</div>
<div id="widget1_password">
Password<input type='password' maxlength='16' name='pass' value='' />
</div>
<div id="widget1_submit">
<input type='submit' value='LOGIN' />
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
(Originally it's in a <?php include_once('login_widget.html'); ?> ).
I then have a button set up that I press to load in the code from the file.
Here's the jQuery code:
$(document).ready(function(){
$(".close").click(function(){
$(this).parent().remove();
});
$("#login-sidebar").click(function(){
$.ajax({
url: 'login_widget.html'
}).done(function(data) {
$('#main-content').append(data);
});
});
});
And now to the problem. This works in that it posts the html-code and it shows on the site, but the problem is that the "close button" doesn't work anymore. So I can't remove the new created html-elements using the class named "close".
I'm very new to jQuery, but I figure this is one way of doing it, but I'm missing something?
Thanks in advance!
Either build your widgets as modules that bind their own events when they are created to remove themselves, or use event delegation. Event delegation would be the simplest given the very basic code that you are using thus far.
$("#main-content").on("click",".close",function(){
$(this).parent().remove();
})