jquery.live('点击',函数(事件)在页面加载时只工作一次

jquery .live('click',function(event) work only once when page loads

本文关键字:加载 工作 一次 点击 live 函数 jquery 事件      更新时间:2023-09-26

我使用的是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注意我刚刚发现整个问题都出在我的动态创建文本框中。我提醒了文本框的值,第一次点击它时会提醒正确的值,之后每次提醒我的意思是,对于新对话框,我都会得到我输入的第一个旧文本框值。有人能帮我解决这个问题吗???

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

只需这样做&我相信会解决你的问题

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;
 });