將「小部件」添加到網站

-1

我目前正在創建一個包含各種小部件的網站，我希望能夠隨時添加/刪除這些小部件。將「小部件」添加到網站

我使用jQuery來實現這一點（至少計劃）。

最簡單的小部件是登錄小部件。看起來像這樣：

<div id="widget1"> 
    <div class="close"></div> 
    <div id="widget1_title"></div> 
    <div id="widget1_content"> 


     <form method='post' action='index.php'> 
     <div id="widget1_username"> 
     Username<input type='text' maxlength='16' name='user' value='' /> 
     </div> 

     <div id="widget1_password"> 
     Password<input type='password' maxlength='16' name='pass' value='' /> 
     </div> 

     <div id="widget1_submit"> 
     <input type='submit' value='LOGIN' /> 
     </div> 


    </div> 
</div>

這存儲在一個名爲login_widget.html的文件中。由於登錄的微件是應該在網站上預先加載（而不必把它的用戶），我有我的index.php文件看起來像這樣：

<body> 



    <div id="container"> 
     <div id="content"> 
      <div id="sidebar"> 
       <div id="login-sidebar"></div> 
      </div> 

      <div id="header"> 
       <div></div> 
       <div></div> 
       <div id="header-logo"></div> 
      </div> 

      <div id="main-content"> 

       <div id="widget1"> 
        <div class="close"></div> 
        <div id="widget1_title"></div> 
        <div id="widget1_content"> 


         <form method='post' action='index.php'> 
         <div id="widget1_username"> 
         Username<input type='text' maxlength='16' name='user' value='' /> 
         </div> 

         <div id="widget1_password"> 
         Password<input type='password' maxlength='16' name='pass' value='' /> 
         </div> 

         <div id="widget1_submit"> 
         <input type='submit' value='LOGIN' /> 
         </div> 


        </div> 
       </div>    


      </div> 

      <div id="footer"> 

      </div> 

     </div> 
    </div> 


</body>

（原文很<?php include_once('login_widget.html'); ?>）。

然後我有一個按鈕設置，我按下從文件加載代碼。

這裏是jQuery代碼：

$(document).ready(function(){ 



$(".close").click(function(){ 
    $(this).parent().remove(); 
}); 


$("#login-sidebar").click(function(){ 
    $.ajax({ 
     url: 'login_widget.html' 
    }).done(function(data) { 
     $('#main-content').append(data); 
    }); 
}); 

});

而現在的問題。這是因爲它發佈的HTML代碼，它顯示在網站上，但問題是，「關閉按鈕」不再工作。所以我無法使用名爲「close」的類刪除新創建的html元素。

我對jQuery很陌生，但我認爲這是一種做法，但我錯過了什麼？

在此先感謝！

來源

2014-01-17 Klesken

所以你不實際添加的小部件，直到頁面加載後？ '$（jQuery）.click（）'函數不適用於動態添加的元素。根據您的jQuery版本，您可以使用'.live（）'函數（[.live（）文檔]（http://api.jquery.com/live/））或'.on（）'函數（[.on（）documentation]（http://api.jquery.com/on/））。 – baacke

@baacke假設他至少擁有委託方法，因爲他使用了延期對象。 –

可以將您的小部件構建爲模塊，這些模塊在創建時自行綁定事件以刪除自己或使用事件委派。考慮到你目前使用的基本代碼，事件代表將是最簡單的。

$("#main-content").on("click",".close",function(){ 
    $(this).parent().remove(); 
})

來源

2014-01-17 23:01:05

謝謝，此代碼完美工作。正如我所說，我剛剛開始jquery等。如果你能指出我創建具有事件模塊的方向，那將是非常棒的，因爲這聽起來像是我將來需要的東西。 – Klesken

我會的，但有很多不同的方式來做到這一點，每個人都有其優點和缺點，針對它的使用方式/位置。基本上，認爲它有一個函數，可以在調用時創建小部件。例如，'createLogin（）'。該函數將附加該小部件的html並綁定該小部件所需的任何事件，例如關閉事件。 –

將「小部件」添加到網站

回答

相關問題