jQuery:使用嵌入在JavaScript变量中的div作为jQuery选择器

时间:2018-08-30 00:00:33

标签: javascript jquery css

我有一个jQuery自定义滚动条,我这样调用它:

<script>
    (function($){
        $(window).on("load",function(){
            $(".main_text,#C2,.png_container").mCustomScrollbar();
        });
    })(jQuery);

这对于除.png_container之外的所有页面元素均正常工作,但是与其他部分不同,该部分仅在JavaScript变量中使用,该变量用于替换占位符ID中的文本,我认为这就是问题所在。

这是从“ onclick”按钮事件中调用它的方式:

<div class="main_text">
<div id="C2">Main Text</div>
</div>

if (type == 101) {
var X = "<header>First Section</header><br>A classic example of good form/<br><br>More information<ul type=\"circle\"><li>Element Point 1<br></li><li>Element Point 1</li></ul><i><span class=\"span_01\">So much better</i></span><br><br><div class=\"png_container\"><img class=\"png_format\" src=\"images/Element 001.png\"></div>"}

document.querySelector("#C2").innerHTML = X;}

png_container有一组单独的滚动条,但是它们并没有被自定义滚动条替换(其他页面部分的确获得了自定义滚动条)。

以下是相关的CSS:

.png_container{
    overflow: auto;
    overflow-y: auto;
    overflow-x: auto;
    height: 400px;
    width: 800px;
    border: 2px solid;
    border-color: green;
}

#C2{
    color:#DBDBDB;
     font-family: camphorW04-Thin,calibri,arial;
    font-size: 14pt;
    text-indent: 0px;
    width: auto;
    margin: auto;
    margin-left: 20px;
    margin-right: 250px;
}

所以我的问题是:如何替换嵌入JavaScript变量的部分上的滚动条,如上所示?

我的研究发现了一些类似的问题,但是没有一个回答这个特定的问题,所以我希望有人知道答案。非常感谢您的任何想法。

1 个答案:

答案 0 :(得分:1)

您可以通过以下方式在加载时初始化mCustomScrollbar插件:

$(window).on("load",function(){
  $(".main_text,#C2,.png_container").mCustomScrollbar();
});

这两个第一选择器此时具有匹配的元素。但是,自从.png_container被附加到点击之后,就没有与最后一个选择器匹配的元素。

因此,您可以安全地从加载处理程序中删除.png_container ...
然后在.png_container上初始化mCustomScrollbar。

$(window).on("load",function(){
  $(".main_text,#C2").mCustomScrollbar();  // Remove .png_container
});

$(".something").on("click",function(){
  if (type == 101) {
    var X = "<header>First Section</header><br>A classic example of good form/<br><br>More information<ul type=\"circle\"><li>Element Point 1<br></li><li>Element Point 1</li></ul><i><span class=\"span_01\">So much better</i></span><br><br><div class=\"png_container\"><img class=\"png_format\" src=\"images/Element 001.png\"></div>"}
    document.querySelector("#C2").innerHTML = X;
    $(".png_container").mCustomScrollbar();  // Add this.
  }