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>

这个代码在Ajax on change函数之后无效。我的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>

问题是在ajax之后文本区域插件无效。

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.
});

在ajax onchange之后，Jquery插件无法正常工作

1 个答案: