按鈕互換

我有一個轉換html代碼到新的問題，然後回去按新的按鈕到舊的。

問題是，當你按下按鈕時，將會轉換爲新的按鈕，但當我再次按下時（新創建的代碼），即使創建的代碼正確（我的意思是id），它也不會回到原來的那個。。

還有就是我的HTML代碼：

<div id="me_div"> 
    <a href="#" id= "me" class="btn btn-success">me</a> 
</div>

和Javascript：

$(function() { 
    $('#me').click(function() { 
     alert("Here I am!"); 
     $("#me_div").html('<a href="#" id= "noob" class="btn btn-danger">noob</a>'); 
     document.getElementById("me_div").setAttribute("id", "noob_div"); 
    }); 

    $('#noob').click(function() { 
     alert("Im noob with JS."); 
     $("#noob_div").html('<a href="#" id= "me" class="btn btn-success">me</a>'); 
     document.getElementById("noob_div").setAttribute("id", "me_div"); 
    }); 
});

來源

2014-11-21 WinterTime

你'click'監聽器連接到特定的按鈕。當你替換他們的HTML時，你會失去事件監聽器。您需要重新附加事件偵聽器，但更好，但重新考慮過程。你想達到什麼目的？ – 2014-11-21 22:42:54

湯姆·里斯答案將解決您的問題，但考慮重新考慮您的解決方案上運行的綁定代碼。每次單擊按鈕時不要銷燬並創建新的HTML並重新分配ID！爲什麼不顯示/隱藏？

http://jsfiddle.net/agmr2ytd/

$(function() { 
    $('#me').click(function() { 
     alert("Here I am!"); 
     $("#me_div").hide(); 
     $("#noob_div").show(); 
    }); 

    $('#noob').click(function() { 
     alert("Here I am!"); 
     $("#noob_div").hide(); 
     $("#me_div").show(); 
    }); 
});

來源

2014-11-21 22:47:44

你認爲這樣速度不夠快嗎？我在寫一個最喜歡的內容ajax代碼。 – WinterTime 2014-11-21 22:51:23

顯示/隱藏然後重新生成HTML和重新綁定偵聽器會更快。 – 2014-11-21 22:52:20

我認爲這將是一個問題，由於我的ajax php文件，當你按下最喜歡的，而它被隱藏（通過編輯像谷歌開發應用程序的HTML代碼）我的數據庫將驚訝POST數據。 – WinterTime 2014-11-21 22:57:19

當該功能執行，沒有#noob結合。您需要在每次DOM被改變的時間，例如：

$(function() { 
    window.bindToMe = function() { 
     $('#me').click(function() { 
      alert("Here I am!"); 
      $("#me_div").html('<a href="#" id= "noob" class="btn btn-danger">noob</a>'); 
      document.getElementById("me_div").setAttribute("id", "noob_div"); 
      bindToNoob(); 
     }); 
    } 

    window.bindToNoob = function() { 
     $('#noob').click(function() { 
      alert("Im noob with JS."); 
      $("#noob_div").html('<a href="#" id= "me" class="btn btn-success">me</a>'); 
      document.getElementById("noob_div").setAttribute("id", "me_div"); 
      bindToMe(); 
     }); 
    } 

    bindToMe(); 
});

來源

2014-11-21 22:42:53

回答

相關問題