0

我无法让这个动态创建的内容与jQuery Slider和jscolor 一起使用。库函数被忽略。我猜这与处理事物的顺序有关。有人可以指出我正确的方向吗？

这是失败代码的简化示例。 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <title>Test dynamic code and jscolor</title>
    <script type="text/javascript" src="jscolor/jscolor.js"></script>
    <script type="text/javascript">
        function addcontent() {
            document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />';
            document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>';
        }

        $(function() {
            $( "#colTslider" ).slider({
                value: 100,
                min: 0,
                max: 255,
                slide: function( event, ui) {
                    $( "#colT" ).val( ui.value );
                }
            });
        });

    </script>
</head>

<body onload="addcontent();">
    <div id="colordiv"></div>
    <div id="sliderdiv"></div>
</body>

如果我手动将 INPUT 标签移动到 DIV 中，它可以正常工作，但为什么这不起作用？

4

4 回答 4

0

loadDOMContentLoaded将在jQuery 所.ready()依赖的之后触发（使用$(function)等同于那个）。

修复代码的一种方法是从中删除onload（body无论如何您都不应该使用这种称为内联事件处理程序的方法）并addContent像这样调用：

    $(function() {
        addContent();

        $( "#colTslider" ).slider({
            value: 100,
            min: 0,
            max: 255,
            slide: function( event, ui) {
                $( "#colT" ).val( ui.value );
            }
        });
    });
于 2013-10-31T15:40:28.873 回答
0

您必须在注入 html 后调用滑块。

http://jsfiddle.net/p46cs/

 function addcontent() {
    document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />';
    document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>';
     $( "#colTslider" ).slider({
            value: 100,
            min: 0,
            max: 255,
            slide: function( event, ui) {
                $( "#colT" ).val( ui.value );
            }
        });
    }

addcontent();
于 2013-10-31T15:43:01.950 回答
0

jquery 可能会在将内容加载到 dom 之前尝试分配事件。尝试在 ready 方法中调用 addContent()。

这是一个 bin http://jsbin.com/eYaqoci/1/edit

于 2013-10-31T15:43:32.740 回答
0

window.onload 将在 jQuery 的 ready 事件之后发生，这意味着：

$( "#colTslider" ).slider({
                value: 100,
                min: 0,
                max: 255,
                slide: function( event, ui) {
                    $( "#colT" ).val( ui.value );
                }

将在 addContent() 之前运行，这意味着 $('#colTslider') 不会匹配任何元素。（见http://learn.jquery.com/about-jquery/how-jquery-works/#Launching_Code_on_Document_Ready）

您可以在 jQuery 的就绪事件处理程序 ($(function(){...}) 中设置滑块之前调用 addContent ，它应该开始工作：

$(function(){
$('#colordiv').html('<input id="valColourRGB" class="color" />');
$('#sliderdiv').html('<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>');

$( "#colTslider" ).slider({
    value: 100,
    min: 0,
    max: 255,
    slide: function( event, ui) {
        $( "#colT" ).val( ui.value );
     });
});
于 2013-10-31T15:49:10.943 回答