當我更改時，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();