Question

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

我正在使用带有.html()的jquery .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，并在$（'#intenetinputcontainer'）之后调用.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();

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

2 个答案: