jqModal dialog - only displaying once
I've got a jqModal dialog with the following code:
$(document).ready( function() {
$('td.item.active').click( function(e) {
$(this).append( '<div class="new">&开发者_JS百科;nbsp;</div>' );
$("#jqModal").jqm({
modal:true,
onHide: function(e) {
e.w.hide(); // Hide window
e.o.remove(); // Remove overlay
}
});
$('#jqModal').jqmShow();
$('input#add_session').click( function(e) {
e.preventDefault();
$('#jqModal').hide();
$('.jqmOverlay').remove();
});
});
});
The HTML used is as follows:
<div id="jqModal" class="jqmWindow">
<form action="" method="post">
<ul>
<li>
<input id="add_session" name="commit" type="submit" value="Add Session" /> <input type="button" name="close" value="Close" id="close" class="jqmClose" />
</li>
</ul>
</form>
</div>
When I first click a <td>
, the dialog launches without a problem. On the second click (or subsequent), the new
class is added to the <div>
, but the dialog doesn't launch.
Shot in the dark here, if you're saying the modal isn't re-created, try not destroying it manually, but rather calling it's .jqdHide()
method. Also, your input
click handler is inside the <td>
's click handler, not sure if this is intentional, to fix both adjust your code to this:
$(function() {
$('td.item.active').click( function(e) {
$(this).append( '<div class="new"> </div>' );
$("#jqModal").jqm({
modal:true,
onHide: function(e) {
e.w.hide(); // Hide window
e.o.remove(); // Remove overlay
}
}).jqmShow();
});
$('input#add_session').click( function(e) {
e.preventDefault();
$('#jqModal').jqmHide();
});
});
If in code you you're adding <td>
elements and the click handler isn't firing for them, then you need to use .live()
so the handler works on current and future <td>
elements with that class combination, so instead of this:
$('td.item.active').click( function(e) {
You would call this:
$('td.item.active').live('click', function(e) {
精彩评论