Question

我无法使用 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中，它可以正常工作，但为什么这不起作用？

Answer 1

load会在jQuery的DOMContentLoaded所依赖的.ready()之后触发（使用$(function)等同于此）。

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

    $(function() {
        addContent();

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

Answer 2

注入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();

Answer 3

在将内容加载到dom之前，jquery可能正在尝试分配事件。尝试在ready方法中调用addContent（）。

这是一个垃圾箱 http://jsbin.com/eYaqoci/1/edit

Answer 4

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的ready事件处理程序（$（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 );
     });
});

动态HTML会导致库失败

4 个答案: