jquery.live('点击',函数(事件)在页面加载时只工作一次
jquery .live('click',function(event) work only once when page loads
我使用的是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;
});
相关文章:
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript链接在点击时不起作用;函数在页面加载时工作
- jQuery加载的async和ready函数不工作
- Javascript不工作/正在加载
- LokiJS自动加载回拨不工作
- 当加载几个js文件时,defer属性应该如何工作
- 在pjax完成其工作时加载脚本
- Scriptaculous dom:仅加载工作"有时“;
- 为什么动态加载的事件在我的代码中不能正常工作
- 加载Soundcloud嵌入式播放器OnClick在FireFox中不工作
- 我无法在发布页面上加载peoplepicker.js它'正在工作的SitePages
- 异步加载的SVG过滤器feColorMatrix在Chrome中工作,而不是在Safari或Firefox中
- php的ajax加载工作不正常
- 使弹出加载工作
- 如何控制页面加载工作流程
- 检查脚本是否加载工作有时
- 试图让jquery加载工作
- 如何es6模块加载工作
- 外部.js文件正在加载&工作,但jQuery在它不工作
- jQuery fn()正在加载/工作