jquery .live（'click'，function（event）仅在页面加载时工作一次

时间：2012-03-28 07:43:06

标签： javascript jquery events

我正在使用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 注意 我只知道整个问题是在我动态创建文本框中。我提醒文本框的值，并在第一次单击它提醒正确的值，然后在每个警报后我的意思是新的对话框我得到旧文本箱子价值是我输入的第一个。任何请帮助我如何解决这个问题???

2 个答案:

答案 0 :(得分：1)

每次重新创建对话框时都必须运行验证代码。现在该事件仅被注册一次，然后在下次打开对话框时，会创建一个新的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;
});

答案 1 :(得分：0)

就这样做＆amp;我相信你的问题会得到解决

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;
 });
相关问题
最新问题