当我更改时，Jquery 脚本停止工作，然后重新加载要选择的原始元素

Question

jquery .html() 存在一些问题。下面的代码可以在用户聚焦时将文本框输入值从“输入电子邮件地址”更改为“”，如果他们没有输入任何内容，则将“输入电子邮件地址”重新置于模糊状态。

我使用 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>

这是 POSTS 到 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() 将不起作用，这更重要！

Answer 1

您正在寻找的是.live()。当您调用 $("#emailaddressinput").focus() 时，jQuery 会在 DOM 中查找元素 #emailaddressinput 并将该函数绑定到该元素。当您替换 javascript 中的 html 时，它不再是同一个元素，而是一个看起来相同的新元素。 .live() 继续监视 DOM 的更改并在创建新元素时绑定到它们。

有关使用 .live 的信息，请参阅 http://api.jquery.com/live/

Answer 2

您遇到的问题是，您正在创建一个名为“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');
          }
     });
}

然后您将在 $(document).ready 上调用 bindEmailEvents，并在使用 $('#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();