Question

我有一个jCarousel处理ajax调用后加载的数据。加载完全正常，但不会随着下一个/上一个按钮的点击而滑动。

我的js文件：

(function($) {
$(function() {
    var itemDiv = $('#items');


$('.jcarousel-control-prev')
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .jcarouselControl({
            target: '-=1'
        });

    $('.jcarousel-control-next')
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .jcarouselControl({
            target: '+=1'
        });

    var setup = function(data, element) {

        var html = '<div class="jcarousel-wrapper">'+'<div class="jcarousel" data-jcarousel="true">'+'<ul>';
        //var html = '<ul>';
        var mrpDiv;

        $.each(data, function() {
          mrpDiv = '<div class="mrp-div" style="text-align:center"><span>' + this.itemMRP + '</span></div>';

            html += '<li class="img-box"><a class="img-box" href="' + this.itemURL + '"><img src="' + this.itemImage + '" alt="' + this.itemTitle + '" style="width=100%"></a><div class="variant-div"><a href="' + this.itemURL + '" title="' + this.itemTitle + '"><div class="varnt-title" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap">' + this.itemTitle + '</div></a></div>'+mrpDiv;
        });
        html += '</ul>'+'</div><a href="#" class="jcarousel-control-prev inactive" data-jcarouselcontrol="true">‹</a><a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">›</a></div>';
        // Append items
        element.html(html);
        // Reload carousel
        element.find('.jcarousel').jcarousel();
    };

    $.ajax({
        type: 'GET',
        dataType: "jsonp",
        crossDomain: true,
        url: "apiLink",
        success: function (responseData) {
            if(responseData && responseData.similarItems.length > 0){
                setup(responseData.similarItems, itemDiv);
            } 

        },
        error: function (responseData) {

        }
    });

});
})(jQuery);

我试图通过上面的代码推送div，其中包含信息，然后愿意在旋转木马中显示。

<div id="items"></div>

一切正常，只是旋转木马不能正常工作。如果我不动态添加内容，我会让它正常工作。

<div class="jcarousel-wrapper">
            <div class="jcarousel" id="items" data-jcarousel="true"><ul>
            </div>
            <a href="#" class="jcarousel-control-prev inactive" data-jcarouselcontrol="true">‹</a>
            <a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">›</a>
         </div>

Answer 1

我相信可能存在问题的代码是您使用.on()方法。您尚未指定该方法应侦听的事件。我想你想听点击事件 - 你应该这样做：

.on('click', 'jcarouselcontrol:active', function() {

而不是：

.on('jcarouselcontrol:active', function() {

...因为jQuery不知道它应该从所选元素发出什么事件。

此外，jcarouselcontrol不是有效的选择器。你的意思是.jcarouselcontorl？

Answer 2

除了第一条评论中指出的问题外，一切都很好。我必须在加载元素后调用方法，移动var setup = function(data, element) {内的方法，一切运行正常。

jCarousel next / prev按钮不能处理动态生成的div元素？

2 个答案: