Сценарий Jquery перестает работать, когда я изменяю, а затем перезагрузить исходные элементы, которые будут выбраны - PullRequest
Новая
       0

Сценарий Jquery перестает работать, когда я изменяю, а затем перезагрузить исходные элементы, которые будут выбраны

0 голосов
/ 12 октября 2011

Несколько проблем с jquery .html().Ниже приведен код, который изменяет значение ввода в текстовом поле с «Введите адрес электронной почты» на «», когда они фокусируются, и, если они ничего не вводили, переводит «Введите адрес электронной почты» обратно на размытие.

IЯ использую jquery .html() с .post() для phpmailer, чтобы обновить содержащий div с "Отправка ...", "Успешно отправлено", "Неудачно" и т. д. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $("#emailaddressinput").focus(function(){
          if ($(this).val() == 'Enter email address') {
               $(this).val('');
          }
     });
     $("#emailaddressinput").blur(function(){
          if (!$.trim($(this).val())) {
               $(this).val('Enter email address');
          }
     });
});
</script>

Вот код, который ДОЛЖЕНPHPMailer.В случае успеха ответ 'true'.Однако, когда это терпит неудачу, он использует dotimeout.js, чтобы задержать 3 секунды, а затем использует jquery .html, чтобы вернуть исходную форму на место.Когда это происходит, приведенный выше код больше не работает.Внизу мой оригинальный HTML. 

<script src="lib/dotimeout.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('#emailbutton').click(function(e) {
          e.preventDefault();
          var email = $('#emailaddressinput').val();
          //write 'sending...' or something
          $('#emailinputcontainer').html('Sending, please wait.');
          var generated_coupon_id = '2';
          var dataString = 'email=' + email + '&generated_coupon_id=' + generated_coupon_id;
          $.post('send.php', dataString, function(data){
               //do stuff
               if(data=='true'){
                    //say "message sent!"
                    $('#emailinputcontainer').html('Your coupon has been emailed!');
               } else {
                    //say error
                    $('#emailinputcontainer').html('There was an error. Please try again.');
                    $.doTimeout(3000,function() {
                         $('#emailinputcontainer').html('<input id="emailaddressinput" type="text" value="Enter email address" /><a id="emailbutton" href="#" style="margin: 0 !important;"><span class="buttontext" >Email coupon</span></a>');
                    });
               }
          });
     });
});
</script>

Вот оригинальный HTML-код формы: 

<div id="emailinputcontainer">
    <input id="emailaddressinput" type="text" value="Enter email address" /><a id="emailbutton" href="#" style="margin: 0 !important;"><span class="buttontext" >Email coupon</span></a>
</div>

Как мне заставить работать мой оригинальный скрипт в верхней части этой страницыснова, когда электронное письмо не удается, и я использую .html() для перезагрузки исходного содержимого.

РЕДАКТИРОВАТЬ: На самом деле, я возился дальше, и теперь .post() не будет работать, что гораздо важнее!

Ответы [ 2 ]

1 голос
/ 13 октября 2011

То, что вы ищете, это .live () .Когда вы вызываете $ ("# emailaddressinput"). Focus (), jQuery находит элемент #emailaddressinput в DOM и связывает функцию с этим элементом.Когда вы заменяете html в своем javascript, это уже не тот же элемент, а новый, который выглядит так же. .live () продолжает следить за изменениями в DOM и связывается с новыми элементами по мере их создания.

для получения информации об использовании .live см. http://api.jquery.com/live/

0 голосов
/ 13 октября 2011

Проблема в том, что вы создаете элемент с именем «emailaddressinput», назначаете прослушиватель событий, удаляете его вместе со слушателем событий, а затем создаете новый элемент «emailaddressinput», который выглядит так же, как и он.за исключением того, что никакие события не связаны.

Вы можете разбить свой JavaScript на функцию: 

function bindEmailEvents() {
     $("#emailaddressinput").focus(function(){
          if ($(this).val() == 'Enter email address') {
               $(this).val('');
          }
     });
     $("#emailaddressinput").blur(function(){
          if (!$.trim($(this).val())) {
               $(this).val('Enter email address');
          }
     });
}

Тогда вы бы вызвали bindEmailEvents для $ (document) .ready и после $ ('#emailinputcontainer '). html (...) используется.

В дополнение к заметке, в зависимости от вашей целевой аудитории, вы можете воспользоваться текстом-заполнителем HTML5 для выполнения аналогичной функции и удалить код JavaScript: 

<input placeholder="Enter email address" ...>

Кроме того, вероятно, лучше будет показывать и скрывать свой контент, чем добавлять и удалять HTML: 

<div id="emailmessagecontainer" style="display:hidden"></div>
<div id="emailinputcontainer"></div>

При запуске после запуска вы должны позвонить: 

$("#emailmessagecontainer").show().text(message);
$("#emailinputcontainer").hide();

При ошибке вы можете сделать: 

$("#emailmessagecontainer").hide();
$("#emailinputcontainer").show();
...