- ベストアンサー
JQueryで動的生成のスライダが動くようにしたい
- JQueryを使用して動的に生成されるスライダが動作しない問題について相談です。生成されたスライダの中で、デフォルトで表示されていたスライダだけが動作し、動的に生成されたスライダは動かない状態です。
- さらに、生成されたスライダのHTMLを出力する機能があるようですが、デフォルトで表示させているスライダと同様のHTMLが生成されているようです。
- この問題を解決し、動的に生成されるスライダも動作させたいです。どのような設定が必要なのか、ご教授ください。
- gaiaxgaiax
- お礼率66% (2/3)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ANo1です。 jauery-uiのコードはわからないので、理解していないままの回答ですが… ＞全てのスライダがデフォルトの状態に戻ってしまいます。 全部のスライダーを初期化してませんか？ ＞$( "#eq > div > span" ).each(function() { ～～ をその都度実行しているとすれば、対象がその時に存在する要素全部になっているので、全て初期化されてしまいます。 実際には、初期化されるだけでなくイベントの二重設定になっていたりする可能性もあります。 ご提示のコードはわからないので、単純化した例を作成しました。 理由としくみを理解してみてください。 *要素にホバーすると、要素が移動し、そのたびに横幅が少しずつ大きくなるようにしてあります。 *最初の設定関数では、動作を設定すると同時に要素の幅を60pxに初期化しています。 「コメントアウトすると～」の行を無効化すると、ご質問のように、要素が追加されるだけの状態になります。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #hoge{ width:100%; overflow:hidden; } #hoge li{ position:relative; margin-top:2em; } #hoge li div{ position:relative; text-align:center; background-color:#aad; cursor:pointer; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> <!-- $(function(){ // 最初からある要素に動作を設定（初期設定） $("#hoge div").each(function(){init(this);}); // 新しく要素を追加（動作を設定） $("#create").click(function(){ var elm = $("<li><div>test</div></li>"); $("#hoge").append(elm); // 下の行をコメントアウトすると追加されるのみになる init($("div",elm)); }); // 要素に初期サイズと動作を設定する関数 function init(elm){ $(elm).css("width",60).mouseover(function(){ $(this).animate({left:300}, 300, function(){ $(this).css("width", $(this).width() + 10).animate({left:0}, 300); }); }); } }); //--> </script> </head> <body> <p> <input id="create" type="button" value="create"> </p> <ul id="hoge"> <li><div>test</div></li> <li><div>test</div></li> </ul> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
jQueryもよく知らない上にjquery-uiはまったく知らないので、内容はほとんど理解していませんが… 多分、 ＞$( "#eq > div > span" ).each(function() { の中でスライダーの設定をしていると思いますが、これが実行される（最初の）タイミングでは、当然ながら後から生成されるスライダーは存在していませんので設定の対象外になっていますよね？ それなので、後から要素としては生成されてもスライダーとして機能しないのではないでしょうか？ 動的に生成した時に、その要素についてスライダーとしての定義を行なってあげれば動作すると想像します。 （私の見落としでどこかで設定していたら、別の原因ですのでスルーしてください）
補足
ご回答ありがとうございます。 http://success.net-c.net/jquery/sliders.html こちらのスライダのページのように、動的に // setup graphic EQ $( "#eq > div > span" ).each(function() { // read initial values from markup and remove that var value = parseInt( $( this ).attr("rel"), 10 ); //var value = parseInt( $( this ).text(), 10 ); $(this).slider({ value: value, orientation: "horizontal", range: "min", min: 1, max: 2, animate: true, slide: function(event, ui) { id = $(this).attr("id").replaceAll("s", ""); changeColor($(this), "color" + id); }, change: function(event, ui) { id = $(this).attr("id").replaceAll("s", ""); changeColor($(this), "color" + id); } }); $(this).draggable({ }); }); が呼ばれるようにしてみたんですが、いくつかスライダを生成させた後、どれかスライダを動かしてから、さらに「GO!」をクリックすると、全てのスライダがデフォルトの状態に戻ってしまいます。 動かしているほうのスライダは「GO!」を押してもそのままの状態にするにはどうすればいいか、もしわかればご教授お願い致します。
お礼
<STYLE> #eq div span { width:100px; float:left; margin:15px } #eq div { width:100px; float:left; margin:15px } .color{ background:#669999; } </STYLE> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <script type="text/javascript"> load(); function load(){ var span = document.getElementsByTagName("span"); if (span != null) { for (i = 0; i < span.length; i++) { changeColor(span[i], "color" + (i+1)); } } } function changeColor(elements, colorId) { var red = elements.slider( "value" ) * 100, green = 180, blue = 180, hex = hexFromRGB( red, green, blue ); $( "#" + colorId ).css( "background-color", "#" + hex ); } function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } // output actual $("#eq").html() function warm() { fid("output").innerHTML = fid("eq").innerHTML.replaceAll("<", "<").replaceAll(">", "><br/>"); } // output document.body.innerHTML function warm2() { fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "<").replaceAll(">", "><br/>"); } // replace org to dest in expression. String.prototype.replaceAll = function (org, dest){ return this.split(org).join(dest); } // return document.getElementById(id) function fid(id){ return document.getElementById(id); } // replace org to dest in expression function replaceAll(expression, org, dest){ return expression.split(org).join(dest); } // output the slider HTML var cnt = 1; var sample = '<DIV style="position:absolute;top:%top%px;left:100px;border:black 1px solid;background:#69BBBB;" id="color%cnt%">'; sample += 'test<SPAN id="s%cnt%" class="ui-slider ui-widget ui-widget-content ui-corner-all ui-slider-horizontal" sizcache06150691335632016="2 3 1" jQuery182023679669074682297="%cCnt%" rel="1" sizset="true" sizcache047932779737654934="59 19 422" jQuery18204489214198968289="%jCnt%">'; sample += '<DIV style="WIDTH: 0%" class="ui-slider-range ui-widget-header ui-slider-range-min"></DIV>'; sample += '<A style="LEFT: 0%" id=a%cnt% class="ui-slider-handle ui-state-default ui-corner-all" href="file:///C:/Users/Administrator/Desktop/sliders.html#" jQuery182023679669074682297="%csCnt%" jQuery18205026261943648269="%jsCnt%">'; sample += '</A>'; sample += '<DIV style="WIDTH: 0%; OVERFLOW: hidden" class="ui-slider-range ui-widget-header ui-slider-range-min">'; sample += '</DIV>'; sample += '</SPAN>'; sample += '<P></P>'; sample += '</DIV>'; $(function(){ $("#eq > div > span").each(function(){ init(this); }); $("#create").click(function(){ var temp = sample; var temp = temp.replaceAll("%cnt%", cnt); var temp = temp.replaceAll("%jCnt%", cnt * 12 + 6); var temp = temp.replaceAll("%cCnt%", (cnt+1) * 12 - 2); var temp = temp.replaceAll("%jsCnt%", cnt * 12 + 2); var temp = temp.replaceAll("%csCnt%", (cnt+1) * 12 - 6); var temp = temp.replaceAll("%top%", cnt * 100); //alert(temp); var elm = $(temp); $("#eq").append(elm); init($("#s" + cnt)); cnt++; }); function init(elm){ var value = parseInt( elm.attr("rel"), 10 ); elm.slider({ value: value, orientation: "horizontal", range: "min", min: 1, max: 2, animate: true, slide: function(event, ui) { id = $(this).attr("id").replaceAll("s", ""); changeColor(elm, "color" + id); }, change: function(event, ui) { id = elm.attr("id").replaceAll("s", ""); changeColor(elm, "color" + id); } }); } }); </script> <DIV id="eq"> </DIV> <div align="center"> <input id="create" type="button" value="create"> <FORM> <INPUT onclick="warm()" name="button" value="src" type="button"> <INPUT onclick="warm2()" value="body" type="button"> <DIV id="output"></DIV> <DIV id="output2"></DIV> </FORM> </div> こちらでできました。4000文字の関係でインデントがない件はお許しください。ありがとうございました。
補足
これは行けそうですね。試してみます。ありがとうございます。