Question

我有以下问题。我正在为一个javascript自定义滚动条附加一个带有“滚动”类的div，我正在动态地追加div。之后，我设置了滚动条。

问题是它不适用于附加的div。当我尝试使用硬编码到文档的div时，一切正常。

function appenddiv() {
    $('#container').append('<div id="test" class="scrolling"> Lorem Ipsum ...... </div>');

    $('.scrolling').scrollbar();
}

我也试过

function appenddiv() {
    $('#container').append('<div id="test"> Lorem Impsum .....</div>');
    $('#test').addClass('scrolling');

    $('.scrolling').scrollbar();
}

我只用一个按钮就试了一下

<a href="#" onClick="appenddiv">Click here</a>

唯一有效的是：

<body>
   <div id="test" class="scrolling"> Lorem Ipsum ..... </div>

   <script type="text/javascript">
     $(document).ready(function() {
         $('.scrolling').scrollbar(); //this is not fired in the examples above!
        });

正如我所说，它只适用于带有类滚动条的div测试已经在体内。函数滚动条是一个jquery自定义的滚动条脚本，位于here

Answer 1

问题是你的按钮中的onClick处理程序实际上并没有调用该方法，它只是引用它。你必须使用括号来调用它。并返回false以防止默认链接操作。所以试试这个：

<a href="#" onClick="appenddiv(); return false;">Click here</a>

此外，您必须确保在调用此函数时定义了您的函数。由于您使用的是jQuery，因此最好的方法是不要使用onclick，而是将所有内容放入文档准备回调中，并使用点击处理程序。所以你的HTML链接就是这样的：

<a href="#" id="scrollbar-link">Click here</a>

你的javascript就像这样：

$(document).ready(function() {
    function appenddiv() {
        var $scrolling = $('<div id="test" class="scrolling"> Lorem Ipsum ...... </div>');
        $scrolling.appendTo($('#container')).scrollbar();
    }

    $('#scrollbar-link').on('click', function(ev) {
        ev.preventDefault(); // This stops the browser from following the link
        appenddiv();
    });
});

Answer 2

这两个都有CSS选择器错误。

在第一种情况下，您尝试匹配类.scrolling的jQuery选择器，但是当您将其附加到文档时，该类为.scrollbar - 因此选择器将不匹配。

在第二种情况下，第二行的jQuery选择器用于类.test，但是您附加了一个带有 id #test的元素。同样，这与文档中的任何元素都不匹配。

除了这些错误之外，乍一看，您的代码应该可以正常工作。修复这些错误并再次拍摄。

Answer 3

在您的第一个示例$('.scrolling').scrollbar();

中

应为$('.scrollbar').scrollbar();

在您的第二个示例中，$('.test').addClass('scrolling');

应为$('#test').addClass('scrolling');

#表示ID，而.表示类。

Answer 4

在第一个片段中，您尝试使用class =“scrollbar”添加div，但使用“scrolling”类选择器（$（'。scrolling'）。scrollbar（）;）。请尝试使用相同的名称。

在第二个片段中，您添加了id =“test”的div，但之后您尝试使用class =“test”将元素添加到元素中。尝试使用

$('#test').addClass('scrolling');

或

$('#test').scrollbar();

函数事件取决于附加的div与类

4 个答案: