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

Question

I have a jQuery custom scrollbar, and I invoke it like this:

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

That works correctly for all of the page elements except .png_container, but unlike the other sections, that section is only used in a JavaScript variable that is used to substitute text in a placeholder ID, and I think that's where the problem is.

Here is how it's called from an "onclick" button event:

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

The png_container has a separate set of scroll bars, but they are not replaced by the custom scroll bars (the other page sections do get the custom scroll bars).

Here is the relevant 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;
}

So my question is: how can I replace the scroll bars on a section that is embedded in a JavaScript variable, as shown above?

My research has found some similar questions, but none that answer this specific question, so I hope somebody knows the answer. Thanks very much for any ideas.

Answer 1

You initialize the mCustomScrollbar plugin on load this way:

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

The two first selectors have matching elements at this moment. But there is no existing element to match the last selector since .png_container is appended on click.

So you can safely remove .png_container from the load handler...
And initialise mCustomScrollbar on .png_container when it exists.

$(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.
  }