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

Question

与jquery .html()有几个问题。下面是一个代码，它将文本框输入值从“输入电子邮件地址”更改为“”，并且如果它们没有输入任何内容，则将“输入电子邮件地址”放回模糊处。

我使用jQuery .html()与.post()到PHPMailer的更新与“发送...”“发送成功”，“失败”等

<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> 

这里包含div的代码是员额的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'); 
      } 
    }); 
} 

，那么你会呼吁$（文件）。就绪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();