Javascript jssor滑块不响应导航箭头

我正在使用javascript动态构建jssor滑块。滑块基于jssor“旋转木马”演示。所有内容在显示时看起来都是正确的，包括滑块两端的导航箭头。当我用鼠标向左或向右滑动时，它也会正确响应。但是，滑块不响应导航箭头上的任何单击

我在其他帖子中提到的一个问题是导航箭头的嵌套不当。我认为这不是问题所在。任何帮助都将不胜感激

以下是构建滑块的javascript：

var CpxRowSlider = function(callback) {
var callback;
var indexedImgEl = new Array();
var DEFAULT_H = 110;
var DEFAULT_W = 260;
var outerDivEl = document.createElement('div');
var title = true;
var addNavArrows = true;

var sliderDivEl = null;
var sliderId = "slider_SOLO";

/*
 * image set should be an array of key-value pairs where the value is the
 * URL of an image and the key will be used as a tag that identifies the
 * image in any callback functions.
 */
function create(imageSet) {
    /* Slides Container -- */
    var rowDivEl = document.createElement('div');
    $(rowDivEl).attr("u", "slides");
    $(rowDivEl).css({
        "cursor" : "move",
        "position" : "absolute",
        "left" : "0px",
        "top" : "0px",
        "width" : "780px",
        "height" : "110px",
        "overflow" : "hidden"
    });
    for ( var key in imageSet) {
        var imgUrl = imageSet[key];
        var imgDivEl = document.createElement('div');
        var imgEl = document.createElement('img');
        imgEl.src = imgUrl;
        $(imgEl).attr("u", "image");
        imgDivEl.appendChild(imgEl);
        // add to row
        rowDivEl.appendChild(imgDivEl);
        $(imgEl).data("cpxKey", key);
        /*
         * actions associated with the img....
         */
        /*
         * click event gets handed off via callback
         */
        if ((callback != undefined) && (callback != null)) {
            imgEl.onclick = function(evt) {
                var targetImg = evt.target;
                trace("Click on " + $(targetImg).data("cpxKey"));
                callback($(targetImg).data("cpxKey"));
            };
        }
    }
    // add slides to a slider...
    sliderDivEl = document.createElement('div');
    sliderDivEl.id = sliderId

    $(sliderDivEl).css({
        "position" : "relative",
        "left" : "0px",
        "top" : "0px",
        "width" : "780px",
        "height" : "110px"
    });
    // add to DOM
    sliderDivEl.appendChild(rowDivEl);
    if (addNavArrows) {
        sliderDivEl.appendChild(createNavArrow(true));
        sliderDivEl.appendChild(createNavArrow(false));
    }
    outerDivEl.appendChild(sliderDivEl);
}

function createNavArrow(toLeft) {
    var arrowSpan = document.createElement('span');
    $(arrowSpan).attr("u", "image");
    $(arrowSpan).css({
        "top" : "30px",
        "width" : "55px",
        "height" : "55px"
    });
    if (toLeft) {
        $(arrowSpan).css({
            "left" : "5px"
        });

        $(arrowSpan).addClass("jssora03l");
    } else {
        $(arrowSpan).css({
            "right" : "5px"
        });
        $(arrowSpan).addClass("jssora03r");
    }
    return arrowSpan;
}

/*
 * Invoked only AFTER the slider has been added to the DOM
 */
function finalize() {
    // add to sliders being controlled by jssor
    var sliderOptions = getSliderOptions();
    var jssor_sliderh = new $JssorSlider$(sliderId, sliderOptions);
}

function getSliderOptions() {
    var sliderhOptions = {
        /*
         * $AutoPlay [Optional] Whether to auto play, to enable slideshow,
         * this option must be set to true, default value is false
         */
        $AutoPlay : false,
        /*
         * $PauseOnHover [Optional] Whether to pause when mouse over if a
         * slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause
         * for touch device, 3 pause for desktop and touch device, default
         * value is 1
         */
        $PauseOnHover : 1,
        /*
         * $AutoPlaySteps [Optional] Steps to go for each navigation request
         * (this options applys only when slideshow disabled), the default
         * value is 1
         */
        $AutoPlaySteps : 2,
        /*
         * $ArrowKeyNavigation [Optional] Allows keyboard (arrow key)
         * navigation or not, default value is false
         */
        // $ArrowKeyNavigation : true,
        /*
         * [Optional] Specifies default duration (swipe) for slide in
         * milliseconds, default value is 500
         */
        $SlideDuration : 300,
        /*
         * [Optional] Minimum drag offset to trigger slide , default value
         * is 20
         */
        $MinDragOffsetToSlide : 20,
        /*
         * [Optional] Width of every slide in pixels, default value is width
         * of 'slides' container
         */
        $SlideWidth : DEFAULT_W,
        /*
         * [Optional] Height of every slide in pixels, default value is
         * height of 'slides' container
         */
        // $SlideHeight: 150,
        /*
         * [Optional] Space between each slide in pixels, default value is 0
         */
        $SlideSpacing : 3,
        /*
         * [Optional] Number of pieces to display (the slideshow would be
         * disabled if the value is set to greater than 1), the default
         * value is 1
         */
        $DisplayPieces : 3,
        /*
         * [Optional] The offset position to park slide (this options applys
         * only when slideshow disabled), default value is 0.
         */
        $ParkingPosition : 0,
        /*
         * [Optional] The way (0 parellel, 1 recursive, default value is 1)
         * to search UI components (slides container, loading screen,
         * navigator container, arrow navigator container, thumbnail
         * navigator container etc).
         */
        $UISearchMode : 0,
        // ...................................
        // [Optional] Options to specify and enable navigator or not
        $BulletNavigatorOptions : {
            $Class : $JssorBulletNavigator$, // [Required] Class to
            // create navigator instance
            $ChanceToShow : 1, // [Required] 0 Never, 1 Mouse Over, 2
            // Always
            $AutoCenter : 0, // [Optional] Auto center navigator in
            // parent container, 0 None, 1 Horizontal, 2
            // Vertical, 3 Both, default value is 0
            $Steps : 1, // [Optional] Steps to go for each navigation
            // request, default value is 1
            $Lanes : 1, // [Optional] Specify lanes to arrange items,
            // default value is 1
            $SpacingX : 0, // [Optional] Horizontal space between each item
            // in pixel, default value is 0
            $SpacingY : 0, // [Optional] Vertical space between each item
            // in pixel, default value is 0
            $Orientation : 1
        // [Optional] The orientation of the navigator, 1 horizontal, 2
        // vertical, default value is 1
        }
    }
    return sliderhOptions;
}

function trace(msg) {
    console.log("CpxRowSlider: " + msg);
}

return {
    create : create,
    finalize : finalize,
    getContainer : function() {
        return outerDivEl;
    }
};
};

更新： 好吧，一些挖掘发现了“在哪里”，但“为什么”仍然是个谜。生成的HTML应该如下所示（为了清晰起见，减去“样式”）：

问题是在实际的HTML页面中有两个属性为u=“slides”的元素。第二个是正确的，但就在它之前是另一个空div。换句话说，我在检查显示的HTML时看到的DOM更像：

<div id="slider_SOLO" >     
        <div u="slides"></div>   
        <div u="slides">
            <div>
                <img u="image" src="../foo1.jpg" />
            </div>
            <div>
                <img u="image" src="../foo2.jpg" />
            </div>
        <div>
        <span u="arrowleft" class="jssora03l" ></span>
        <span u="arrowright" class="jssora03r"></span>
</div>

如果我将类似的div添加到jssor carousel演示HTML中，就会得到相同的行为（即导航箭头不再工作）

问题是我的javascript没有插入错误（即额外的DIV）。相反，它似乎与电话有关

var jssor\u sliderh=new$JssorSlider$（sliderId，sliderOptions）

我想知道原因是否在我传入的选项中。
找到了！根本原因确实是我的选择，但不是我的想法。我错过了$ArrowNavigatorOptions。神秘DIV仍在插入，但现在一切正常

我学到的教训是，jssor似乎悄悄地失败了，因为它没有生成关于缺少的选项的控制台消息，而是什么也没做
 你说得对！我将为以后的更新添加此选项检查。
<div id="slider_SOLO" >     
        <div u="slides"></div>   
        <div u="slides">
            <div>
                <img u="image" src="../foo1.jpg" />
            </div>
            <div>
                <img u="image" src="../foo2.jpg" />
            </div>
        <div>
        <span u="arrowleft" class="jssora03l" ></span>
        <span u="arrowright" class="jssora03r"></span>
</div>