的jQuery .live（“点击”，函数（事件）对话框时，页面加载

Question

我使用jquery对话框，在其中我把2文本框和按钮1。工作正常，一切都渲染工作只有一次。在按钮我底肥验证我的文本框，如果它是空的。因此，对于在页面呈现，但之后不工作的另一个对话框。 看一看我的这两个功能。 第一个是对话的第一次验证做工精细，二是更新文本框在对话框

$('.update_service_name').live('click',function(event){ 
    var $tr = $(this).closest('tr'); 
    var old_value  = $tr.children('td:eq(1)').text(), 
     phone_service_id = $tr.children('td:eq(2)').text(); 
    var old_value_textbox = "<div class='learfix'><label>Current Service Name</label><div class='input'><input class='large' type='text' value='"+old_value+"' disabled='disabled'/></div></div>" ; 
    var new_value_textbox ="<div class='learfix' id='div_new_value'><label>New Service Name</label><div class='input'><input class='large' type='text' value='' id='new_service_name' /><span class='help' id='error_message_div_new_value'></span></div></div>"; 
    var update_button ="<span><span class='update_service_name_btn'><a href='#' class='small blue button'><span>Update</span></a></span> <img src='"+ temp_images_path +"/small_loader.gif' id='small_loader' style='display:none;float:right;margin: 3px 150px 0 0;' /></span>" ; 

    var $dialog = $('<div>',{title:'Update Service Name'}).dialog({ 
      autoOpen: false, 
      width: 250 
    }); 

    $('<p>').html(old_value_textbox).appendTo($dialog); 
    $('<p>').html(new_value_textbox).appendTo($dialog); 
    $('<p>').html(update_button).appendTo($dialog); 

    $dialog.dialog('open'); 
    return false; 
}); 

验证对话框

$('.update_service_name_btn').live('click',function(event){ 
    var pass = true; 
    var new_service_name = $("#new_service_name").val(); 
    $("#error_message_div_new_value").html(' '); 

    if(!new_service_name){ 
     $("#error_message_div_new_value").html('New Serrvice Name Please!'); 
     pass = false; 
     return false; 
    } 
}); 

文本框

更新

$('.update_service_name').live('click',function(event){ 
var $tr = $(this).closest('tr'); 
var old_value  = $tr.children('td:eq(1)').text(), 
phone_service_id = $tr.children('td:eq(2)').text(); 
    var old_value_textbox = "<div class='learfix'><label>Current Service Name</label><div class='input'><input class='large' type='text' value='"+old_value+"' disabled='disabled'/></div></div>" ; 
var new_value_textbox ="<div class='learfix' id='div_new_value'><label>New Service Name</label><div class='input'><input class='large' type='text' value='' id='new_service_name' /><span class='help' id='error_message_div_new_value'></span></div></div>"; 
var $update_button = $("<span><span class='update_service_name_btn'><a href='#' class='small blue button'><span>Update</span></a></span> <img src='"+ temp_images_path +"/small_loader.gif' id='small_loader' style='display:none;float:right;margin: 3px 150px 0 0;' /></span>"); 

$update_button.find('.update_service_name_btn').live('click',function(event){ 
    var pass = true; 
    var new_service_name = $("#new_service_name").val(); 
    $("#error_message_div_new_value").html(' '); 
    if(!new_service_name){ 
    $("#error_message_div_new_value").html('New Serrvice Name Please!'); 
    pass = false; 
    return false; 
    } 
}); 

var $dialog = $('<div>',{title:'Update Service Name'}).dialog({ 
     autoOpen: false, 
    width: 250 
}); 

$('<p>').html(old_value_textbox).appendTo($dialog); 
$('<p>').html(new_value_textbox).appendTo($dialog); 
$('<p>').append($update_button).appendTo($dialog); 

$dialog.dialog('open'); 
return false; 
}); 

验证对话框文本框（仍为旧相同）

$('.update_service_name_btn').live('click',function(event){ 
var pass = true; 
var new_service_name = $("#new_service_name").val(); 
$("#error_message_div_new_value").html(' '); 

if(!new_service_name){ 
    $("#error_message_div_new_value").html('New Serrvice Name Please!'); 
    pass = false; 
    return false; 
} 
}); 

PLZ 注意 我想通了，整个问题是在我的动态创建文本box.i提醒了文本框的值，并在第一次点击它时提醒正确的值，然后在每次提醒时我用新的对话框表示我正在获取旧的文本框值一个我enter.can任何请帮助我如何得到解决这个问题？

Answer 1

只是这样做&我相信你的问题将得到解决

var $dialog=null; 
$('.update_service_name').live('click',function(event){ 
if($dialog!=null){ 
$dialog.remove(); 
} 
var $tr = $(this).closest('tr'); 
var old_value  = $tr.children('td:eq(1)').text(), 
phone_service_id = $tr.children('td:eq(2)').text(); 
var old_value_textbox = "<div class='learfix'><label>Current Service Name</label><div class='input'><input class='large' type='text' value='"+old_value+"' disabled='disabled'/></div></div>" ; 
var new_value_textbox ="<div class='clearfix'><label>New Service Name</label><div class='input'><input class='large' type='text' value='' id='new_service_name' /><span class='help' id='error_message_div_new_value'></span></div></div>"; 
var $update_button = $("<span><span class='update_service_name_btn'><a href='#' class='small blue button'><span>Update</span></a></span> <img src='"+ temp_images_path +"/small_loader.gif' id='small_loader' style='display:none;float:right;margin: 3px 150px 0 0;' /></span>"); 
$dialog = $('<div>',{title:'Update Service Name'}).dialog({ 
    autoOpen: false, 
    width: 250 
}); 

$('<p>').html(old_value_textbox).appendTo($dialog); 
$('<p>').html(new_value_textbox).appendTo($dialog); 
$('<p>').append($update_button).appendTo($dialog); 

    $dialog.dialog('open'); 
return false; 
}); 

Answer 2

你必须运行验证代码每次重新创建对话框。现在事件只被注册一次，然后在下一次打开对话框时，会创建一个新的update_service_name_btn，但不会再次注册该事件！
例如：

... 
var $update_button = $("<span><span class='update_service_name_btn'><a href='#' class='small blue button'><span>Update</span></a></span> <img src='"+ temp_images_path +"/small_loader.gif' id='small_loader' style='display:none;float:right;margin: 3px 150px 0 0;' /></span>"); 
$update_button.find('.update_service_name_btn').live('click',function(event){ 
    var pass = true; 
    var new_service_name = $("#new_service_name").val(); 
    $("#error_message_div_new_value").html(' '); 
    if(!new_service_name){ 
    $("#error_message_div_new_value").html('New Serrvice Name Please!'); 
    pass = false; 
    return false; 
    } 
});  

var $dialog = ... 
... 
$('<p>').append($update_button).appendTo($dialog); 
... 

全码：

$('.update_service_name').live('click',function(event){ 
    var $tr = $(this).closest('tr'); 
    var old_value  = $tr.children('td:eq(1)').text(), 
    phone_service_id = $tr.children('td:eq(2)').text(); 
    var old_value_textbox = "<div class='learfix'><label>Current Service Name</label><div class='input'><input class='large' type='text' value='"+old_value+"' disabled='disabled'/></div></div>" ; 
    var new_value_textbox ="<div class='learfix' id='div_new_value'><label>New Service Name</label><div class='input'><input class='large' type='text' value='' id='new_service_name' /><span class='help' id='error_message_div_new_value'></span></div></div>"; 
    var $update_button = $("<span><span class='update_service_name_btn'><a href='#' class='small blue button'><span>Update</span></a></span> <img src='"+ temp_images_path +"/small_loader.gif' id='small_loader' style='display:none;float:right;margin: 3px 150px 0 0;' /></span>"); 

    $update_button.find('.update_service_name_btn').live('click',function(event){ 
    var pass = true; 
    var new_service_name = $("#new_service_name").val(); 
    $("#error_message_div_new_value").html(' '); 
    if(!new_service_name){ 
     $("#error_message_div_new_value").html('New Serrvice Name Please!'); 
     pass = false; 
     return false; 
    } 
    }); 

    var $dialog = $('<div>',{title:'Update Service Name'}).dialog({ 
     autoOpen: false, 
     width: 250 
    }); 

    $('<p>').html(old_value_textbox).appendTo($dialog); 
    $('<p>').html(new_value_textbox).appendTo($dialog); 
    $('<p>').append($update_button).appendTo($dialog); 

    $dialog.dialog('open'); 
    return false; 
});