jQuery插件平變化

Question

這裏是我的代碼：（jQuery的）

<script src="./minified/jquery.sceditor.bbcode.min.js"></script> 
     <script>   var loadCSS = function(url, callback){ 
       var link = document.createElement('link'); 
       link.type = 'text/css'; 
       link.rel = 'stylesheet'; 
       link.href = url; 
       link.id = 'theme-style'; 

       document.getElementsByTagName('head')[0].appendChild(link); 

       var img = document.createElement('img'); 
       img.onerror = function(){ 
        if(callback) callback(link); 
       } 
       img.src = url; 
      } 
      $(document).ready(function() { 
       var initEditor = function() { 
        $(".new_text").sceditor({ 
         plugins: 'bbcode', 
         style: "./minified/jquery.sceditor.default.min.css" 
        }); 
       }; 

       $("#theme").change(function() { 
        var theme = "./minified/themes/" + $(this).val() + ".min.css"; 

        $(".new_text").sceditor("instance").destroy(); 
        $("link:first").remove(); 
        $("#theme-style").remove(); 

        loadCSS(theme, initEditor); 
       }); 

       initEditor(); 
      }); 

     </script> 

此代碼阿賈克斯不工作後的變化的功能。我的HTML代碼是在這裏： 這裏是Ajax響應：

<div id="txtHint" style="margin-left: 160px;"> 
<textarea class="new_text" name="about_builder" id="about_builder" style="height:200px;width:600px;"> 
<?php echo $row_ab['about_builder']; ?> 
</textarea></div> 

問題是，文本區域的插件不工作阿賈克斯之後。

Answer 1

當您使用ajax添加新的html時，您總是需要調用.sceditor。您還應該修改該函數以僅在新添加的元素上調用sceditor。

var initEditor = function(context) { //Add a context parameter to search only from this context 
    $(".new_text",context).sceditor({ 
      plugins: 'bbcode', 
      style: "./minified/jquery.sceditor.default.min.css" 
      }); 
    }; 

你的AJAX功能如下：

$.ajax({ 
    // 
}) 
.done(function(data){ 
    yourContainer.html(data); //When you load the html, you need to insert it into the DOM 
    initEditor(yourContainer);//call the sceditor on the newly added element. 
});