Javascript 未初始化Dragdealer

html

---

我以前使用过这个插件，它工作得非常好。因此，我使用了上面显示的相同代码，但由于某些原因，句柄没有移动。console中没有错误，这就是我找不到问题的原因。

您的思路正确。只需将引导模式显示处理程序从

$（“#exampleModal1”）更改为

到（'show.bs.modal'，function（）{…}）上的“#exampleModal1”）。

请参见

您还需要将处理程序包装在

$（document.ready（function（）{…}）

最后，不要忘记包含相关的样式表和脚本。希望这有帮助

$（文档）.ready（函数（）{
$（“#exampleModal1”）.on（'show.bs.modal'，function（）{
//德拉德勒
//产品状况
var main_width=$（“#演示简单滑块”）.outerWidth（）；
新的Dragdealer（'demo-simple-slider'{
animationCallback:函数（x，y）{
拉长手柄（）；
$（'#演示简单滑块#值'）.val（（x*7）.toFixed（1））；
var x=$（“#演示简单滑块#值”）.val（）；
},
});
//用于设置手柄位置的函数
函数句柄（）{
var left_off_container=$（“#演示简单滑块”）.offset（）.left；
var left_off=$（'#demo simple slider.handle'）.offset（）.left；
变量宽度\圆=（（左\关-左\关容器）+10）；
$（'#demo simple slider.sado div'）.width（width#u圆）；
}
});
});

启动演示模式

代码运行时是否存在具有相应id的标记？通过运行console.log（document.getElementById（'demo-simple-slider'））检查它；在初始化Dragdealer之前。结果是什么？@LajosArpad我在执行console.log（document.getElementById（'demo-simple-slider'））时在console中得到元素；看起来不错。如果从标记的属性中删除dragdealer类，会发生什么？我想这可能是dragdealer已经初始化的信号。@Raj也许你可以给我们更多的上下文（即包含更多相关的代码），我试过了，但这不起作用，所以我在模式中写了一个onclick函数来初始化插件。无论如何，非常感谢：）
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div id="demo-simple-slider" class="dragdealer">
        <div class="handle red-bar">
            <p><input id="values" onchange="alert();" type="text"></p>
        </div>
    </div>
</div>

$( "#exampleModal1" ).on('shown', function(){
    //Dragdealer
    //Product condition
    var main_width = $('#demo-simple-slider').outerWidth();

    new Dragdealer('demo-simple-slider', {
        animationCallback: function(x, y) {
            dragged_handle();
            $('#demo-simple-slider #values').val((x * 7).toFixed(1));
            var x = $('#demo-simple-slider #values').val();
        },

    });

    //Function to set Handle position
    function dragged_handle(){
        var left_off_container = $('#demo-simple-slider').offset().left;
        var left_off = $('#demo-simple-slider .handle').offset().left;
        var width_circle = ((left_off - left_off_container) + 10);
        $('#demo-simple-slider .sado-div').width(width_circle);
    }
});