1

我有以下问题。我正在为 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自定义的滚动条脚本，位于这里

4

4 回答 4

3

问题是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();
    });
});
于 2013-02-21T21:36:35.060 回答
0

这些都有 CSS 选择器错误。

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

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

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

于 2013-02-21T21:37:07.353 回答
0

在你的第一个例子中$('.scrolling').scrollbar();

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

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

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

#指的是一个id，而.指的是一个类。

于 2013-02-21T21:38:34.987 回答
-1

在第一个片段中，您尝试使用 class = "scrollbar" 添加 div，但使用 "scrolling" 类选择器 ($('.scrolling').scrollbar();)。尝试使用相同的名称。

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

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

或者

$('#test').scrollbar();
于 2013-02-21T21:44:30.017 回答