- ベストアンサー
jQueryのappendで追加したdivにclickイベント
fujillinの回答
No1です。 ＞ただ、.testに対して実行されるタイミングでは確実にappendされて ＞います。 それだったら、こういう（↓）記述にはらないのでは？ ＞$(function(){ ＞$("div.test").click(function(){ ～～～ クリックしてappendし、その後クリックすれば背景が変わる例。 （No2でも書いたように、クリックするたびにappendされます。） <html> <head> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript"><!-- function app(){ $(".class").append("<div class=test style=\"height:100;\">test word</div>"); $("div.test").click(function(){ this.style.backgroundImage = "url(./img/test.gif)"; }); } // --></script> </head> <body> <div class="class">here</div> <button onclick="app()">append実行</button> </body> </html>
関連するQ&A
- jQuery - bind('click', x)
<!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、 この hideFunc （メニューを消す命令） がすぐ呼ばれてしまいます。 適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、 いまいちスマートな感じがしません。 ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください
- 締切済み
- JavaScript
- jQueryで追加した要素がマウスホバーに反応しない
jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>
- ベストアンサー
- JavaScript
- jQuery mobileのイベントについて
jQuery mobile 1.0で使えていたイベントが1.1.1で使えなくなりました。 何か仕様が変わったのでしょうか？ よろしくお願いします。 例： $("div:jqmData(role='collapsible')").each(function(){ // ここが機能しなくなった bindEventTouch($(this)); }); function bindEventTouch(element) { element.bind('tap', function(event, ui) { if(element.hasClass('ui-collapsible-collapsed')) { } else { $('#' + element.attr('id') + 'l li').remove(); $('#' + element.attr('id') + 'l').append("<li>I'm Header #FF</li>"); } }); }
- 締切済み
- JavaScript
- Jquery html()を使って空のdivを挿入したい
お世話になります。 コーディングの際、「div」がひとつ多いために大幅にレイアウトが崩れてしまいました。しかし、事情があってHTMLをいじることができません。 そこで無理やりなのですが Jqueryのhtml()を使って<div class="test">と、追加してやることにしました。 <script> $(function(){ $("#article_btm").html('<div class="test">'); }); </script> <div id="article_btm"></div> </div><!--これがひとつ多いdiv--> 思惑では <div id="article_btm"><div class="test"></div> </div><!--これがひとつ多いdiv--> と、なるかと思ったんですが、プレビューすると <div id="article_btm"><div class="test"/></div> </div><!--これがひとつ多いまま--> となって、結局</div>がひとつ多いままなんです。 他にもtext()でもためしてみたんですが、結果は同じでした。 どなたかよい方法をご存じの方は教えてください！！
- ベストアンサー
- JavaScript
- jquery の clickイベント
いつもお世話になっております。 当方jQueryは初めてで試行錯誤しながら使っています。 標題について質問です。 <form> <input type="text" id="code[1]" value="00001"> <input type="submit" id="add[1]"> <input type="submit" id="del[1]"> </form> 上記のフォーム文で、 jQuery.noConflict(); jQuery(document).ready(function($){ $("input").click(function(){ var e = $(this).attr("id"); }); }); とし、上のform文を直接書いた場合は押されたボタンが認識されるのですが、 form文をajax通信でinnerHTMLで出力されたボタンを押した時は ボタンを押してもイベントを認識してくれません。 これはinnerHTMLで出力しているからなんでしょうか。 何度やっても分からず質問させて頂きました。 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- jquery ドロップダウン・メニュー
jquery ドロップダウン・メニュー ドロップダウン・メニューを作成しています。一番最後のtwitter部分だけにクリック動作を適用させたいのですが、 思うように表示が出来ません。 どうしたらいいのか、教えてください。 <script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('li.twitter').click(function() { if ($(this).hasClass('click')) { $(this).removeClass('click'); } else { $('.click').removeClass('click'); $(this).addClass('click'); } }); $('div.drop').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); </script> <div id="feed"> <ul class="aux"> <li class="rss1"> <a href="http">RSS1</a> </li> <li class="rss2"> <a href="http">RSS2</a> </li> <li class="rss3"> <a href="http">RSS3</a> </li> <li class="twitter"> <a href="#"><span>Twitter</span></a> <div class="drop"> <p><strong>TW1</strong> <a href="http://www.twitter.com/●●" target="_blank"><img src="http://abcde/a.png" />Follow Me</a> </p> <p> <strong>TW2</strong> <a href="http://www.twitter.com/●●●●●" target="_blank"><img src="http://abcde/b.jpg" />Follow Me</a> </p> </div> </li> </ul> </div>
- ベストアンサー
- JavaScript
- jQueryのhideのやり方について教えてください。
jQueryのhideのやり方について教えてください。 下記のようなtr要素に触れたときにp要素を表示するといったものです。 ページを読み込んだときは非表示にしておいて触れると表示するようにしたいのですが・・・読み込んだときに非表示にするにはどのようにしたらいいでしょうか？ また、p要素に触れると当然ですがp要素が消えてしまいます。 どのように対策したらいいでしょうか？ <table class="style1"> <tr id = "tr1"> <td class="style3"></td> <td class="style4"> <img alt="" src="login-blue.gif" style="width: 89px; height: 26px" /></td> <td class="style5"> <img alt="" src="b_count1.gif" style="width: 24px; height: 27px" /></td> <td class="style6"></td> <td><div id = "load1"></div></td> </tr> <tr> <td class="style2" colspan="5"> <p id = "dtl">熱いジュースふりぼる <br /><a href=gazo.htm>すごいジュース捻りだす</a></p> </td> </tr> </table> $("#tr1").hover( function() { $("#dtl").show(); }, function() { $("#dtl").hide(); } );
- ベストアンサー
- JavaScript
- jqueryで置換を行いたいです。
natsunastu_iguさん jqueryで置換を行いたいです。 http://shop.titles.tokyo/img/new/icons1.gif を http://file001.shop-pro.jp/PA01294/594/images/i_new2.png に置き換えたいのですが以下の書き方だとうまく動いてくれませんでした。 どう記載すればいいでしょうか？ <div id="myToolTip0" class="display_none"> <h3>電気スタンド新作<img class="new_mark_img2" src="http://shop.titles.tokyo/img/new/icons1.gif" style="border:none;display:inline;margin:0px;padding:0px;width:auto;"></h3> </div> <Script> $(function(){ $('.new_mark_img2').replace('http://shop.titles.tokyo/img/new/icons1.gif','http://file001.shop-p... }); </script>
- 締切済み
- JavaScript
- jQueryで特定id以外の下にある要素を削除したい
HTMLの制御にjQueryを使用しています。 作業の流れで、#contents以外の要素に存在する特定のクラスを削除したいと思っています。 対象ソースをコンパクトに書くと <body> <div id="contents"> <p class="test">moji</p> </div> <div id="etc"> <p class="test">moji</p> </div> <div id="etc2"> <p class="test">moji</p> </div> </body> というもので、contents以外のetc,etc2にあるclass="test"をremoveしたいのです。 ※cotents以外はidがイロイロ変わるので、「contents以外」でやろうとしています。 jQueryのマニュアルを見ながら、次のようなコードを書きました。 jQuery("*").not("#contents").hasClass("test").removeClass("test"); しかし、実行がうまくいきません。 FireFoxのFireBugで動作を見てみると「functionがない」というメッセージなっています。 jQuery("*").not("#contents").each( function() { jQuery(this).hasClass("test").each( function() { jQuery(this).removeClass("test"); }); }); でも同じ結果でした。 何か良い方法はないでしょうか。
- ベストアンサー
- JavaScript
- jquery not()がきかない
jqueryについて１点だけ教えて頂きたいことがございます。 今、下記のjqueryにてロールオーバー時のイベントを実行しています。 $('a:not(.current) img').each(function() { var target = $('a:not(.current) img') target.hover(function(){ $(this).stop().fadeTo(500,0.6); }, function() { $(this).stop().fadeTo(500, 1); }); }); それともう一つjqueryである一部分だけ違うロールオーバーにしたく、 全体にかかる上記のjqueryで、#photogalleryというID以外の(a:not(.current) img)にしたいのですが、 ('a:not(.current) img')を $('div').not('#photogallery').find('a:not(.current) img') このようにしてみたのですが、#photogalleryまで実行されてしまいます。 調べて見たのですがわからず、教えて頂ければ幸いです。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript