jquery .live («щелчок», функция (событие) работает только один раз при загрузке страницы - PullRequest
Новая
       1

jquery .live («щелчок», функция (событие) работает только один раз при загрузке страницы

1 голос
/ 28 марта 2012

Я использую диалог 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 ]

1 голос
/ 28 марта 2012

Вы должны запускать свой код проверки каждый раз, когда вы воссоздаете свой диалог. Теперь событие регистрируется только один раз, затем при следующем открытии диалога создается новый 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;
});
0 голосов
/ 28 марта 2012

просто сделайте это, и я уверен, что ваша проблема будет решена 

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;
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...