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!
