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

loadDOMContentLoadedjQuery が.ready()依存するよりも遅く起動します (使用$(function)はそれと同等です)。

コードを修正する 1 つの方法は、 (インライン イベント ハンドラーと呼ばれるこのメソッドをとにかく使用しないでください)onloadから削除し、次のように呼び出すことです。bodyaddContent

    $(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

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 );
     });
});
于 2013-10-31T15:49:10.943 に答える