我有一个 jQuery 自定义滚动条,我这样调用它:
<script>
(function($){
$(window).on("load",function(){
$(".main_text,#C2,.png_container").mCustomScrollbar();
});
})(jQuery);
这对除 .png_container 之外的所有页面元素都能正常工作,但与其他部分不同的是,该部分仅用于用于替换占位符 ID 中的文本的 JavaScript 变量,我认为这就是问题所在.
这是从“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 变量中的部分的滚动条,如上所示?
我的研究发现了一些类似的问题,但没有一个能回答这个具体问题,所以我希望有人知道答案。非常感谢任何想法。
最佳答案
您以这种方式在加载时初始化 mCustomScrollbar 插件:
$(window).on("load",function(){
$(".main_text,#C2,.png_container").mCustomScrollbar();
});
此时两个first selector都有匹配的元素。但是没有现有元素可以匹配最后一个选择器,因为 .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.
}
关于javascript - jQuery:使用嵌入在 JavaScript 变量中的 div 作为 jQuery 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52087552/