• 締切済み

jQueryMobileのbindメソッドについて

mtaka2の回答

  • mtaka2
  • ベストアンサー率73% (867/1179)
回答No.2

bindの場合、複数の種類のイベントに対しまとめてハンドラを設定することができます。 異なる種類のイベントにハンドラを設定する場合、 $('foo').bind('change blur', function(){…}); と $('foo').change(function(){…}).blur(function(){…}); とは同じ動作になりますが、bindの方が簡潔に書けます。 質問者さんの挙げた例のように一つにイベントだけにハンドラを設定する場合、bind('tap', …)と、tap(…)は、機能的にはまったく等価です。その場合は、tap などのイベント名を関する関数を使った方が簡潔に書けます。 live は、その関数を実行した後に追加された要素に対してもイベント登録が有効になる、という点でbindやtapなどとは機能がまったく異なります。 http://semooh.jp/jquery/api/events/live/type,+fn/

rie0702
質問者

お礼

ありがとうございます!!ただの省略形だったみたいですね!!英数半角でつなげれば複数のイベントがかけるんですねすごいです! 調べましたら、、 click,mouseoverなどの正規のjQueryメソッドならbind()によるバインドは省略可なのですが、 jQueryに未対応なメソッド、例えばcontextmenu()メソッド(コンテキストメニューを出すメソッド)を検知したいばあいはbind()が必要だそうです。 ex) $(document).bind('contextmenu', function(e){}); jQueryに未対応なメソッド。。。だとしたらjQueryMobileなどは不安なので原則bind()メソッドを入れる癖付けておいた方がよいでしょうかw >http://semooh.jp/jquery/api/events/live/type,+fn/ 将来のことを考えたプログラムの際は使ってみます!!! すごくよくわかりました!!! ありがとうございました*

関連するQ&A

  • jQueryで指定された要素のIDに触れた時イベントを起こしたいのです

    jQueryで指定された要素のIDに触れた時イベントを起こしたいのですがうまくいかずに困っています。 jQuery(document).ready(function($) { var msg = ""; $("#Div11").mouseover(function() { msg = "おはよ" alert(msg); }); $("#Div2").mouseover(function() { msg = "こんにちは" alert(msg); }); $("#Div3").mouseover(function() { msg = "うっすー" alert(msg); }); $("#Div4").mouseover(function() { msg = "お疲れ様でした" alert(msg); }); $("#Div5").mouseover(function() { msg = "こんばんは" alert(msg); }); }); このような記述をしているのですがIDに触れた時、値を代入してメッセージを表示させたいのですが出来ません。 どなたかご教示願います!

  • jquery bindがとまらない

    jquery の bindを使い、以下のサイトを参考にしながら、実装を試みているのですが、unbindしてもとまらなくなってしまいました。 mousedown、mousemove、mouseup を使い、mousedownした時点のx座標と、mousemoveしている間のx座標の差を取り、mouseup時に移動距離を表示するというものをとりあえず作りたいのですが、mousemoveが永遠続いてしまい、mouseupしてもとまりません。 $('#main_body').mousedown(function(e){ now_x = e.pageX; alert(now_x); $(document).mousemove(function(e){ now_x2 = e.pageX; alert(now_x2); }) }).mouseup(function(){ alert("bbbb"); $(document).unbind("mousemove"); }); これですと、now_x2がずっと出続けてしまいます。。。 どうか、お力をお貸しください。 よろしくお願い致します。 参考サイト: http://weble.org/2011/03/08/jquery-floatingbox

  • 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>"); } }); }

  • jQuery bind時のeventについて

    お世話になっております。 当方JavaScriptは不慣れなため、的外れな質問になってしまうかもしれませんが、その際はご指摘を頂けるとありがたいです。 スマートフォン向けのWebページを作成するにあたり、jQueryを用いてタッチイベントを取得しようと考えています。 以下に簡略化したソースを掲載致します。 /*--------------------------------------------*/ <script type="text/javascript"> $(function(){ $('#id').bind('touchstart',function(e) { alert(event); }); }); </script> /*--------------------------------------------*/ この際、Android版Opera上で表示されたのは、「object TouchEvent」でした。 その後主要なブラウザで動作確認をしていたところ、Android版FireFoxでは動作しないことが判明しました。 調べたところ、Gecko系のブラウザではwindow.eventという属性は存在せず、引数であるeに格納されているとのことだったので、alert(e);として確認したところ、表示されたのは「object Object」でした。 本来であればevent.changedTouches[0].pageX等の値を取得したいのですが、引数のeが目的とするオブジェクトではないようなので、値を取得できません。 1. そもそもこのeventは、window.eventという認識で良いのでしょうか? 2. FireFoxでwindow.eventに該当するオブジェクトを取得するにはどういった手順が必要なのでしょうか? 以上2点、ご教授頂けると幸いです。

  • jQueryMobileでテキスト分岐ゲーム

    JavaScript&jQuery初心者です。 JavaScriptの勉強のために、jQueryMobileを使って、スマホ向けの簡単なテキストゲームを作ってみましたが、変数で処理の分岐のさせ方がわかりません。 ページがロードされたときに、have_mapが決まってしまいます。 以下のサンプルだと、常に地図を手に入れた状態で宿屋に行けてしまいます。 ボタンの選択によって、状態を変数に入れて、分岐などに使いたいのですが。。。 そもそも、変数定義の流れがよく分かっていないのだと思うのですが。。。 アドバイスがいただけるとうれしいです。 よろしくお願いいたします。 コードはこちらになります。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ChooseAvatar</title> <!-- jQuery MobileのCSSを読み込む --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> <!-- jQuery本体を読み込む --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- jQuery MobileのJSを読み込む --> <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script> </head> <body> <script> var have_map = 0; </script> <div id="page1" data-role="page"> <div data-role="header" > <h1>質問1</h1> </div> <div data-role="content" align="center"> <p> 宝箱を見つけた<br> </p> <p> <a href="#page2" data-role="button">開ける</a> <a href="#page3" data-role="button">開けない</a> </p> <script> have_map = 0; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page2" data-role="page"> <div data-role="header" > <h1>宝箱</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 地図を手に入れた<br> </p> <p> <a href="#page3" data-role="button">先に進む</a> </p> <script> have_map = 1; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page3" data-role="page"> <div data-role="header" > <h1>分かれ道</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 分かれ道です<br> </p> <p> <script> //alert(have_map); if( have_map === 1 ){ have_map_text_A = "宿屋に入る"; have_map_text_B = "お店に入る"; }else{ have_map_text_A = "右に進む"; have_map_text_B = "左に進む"; } document.write("<a href='#page4' data-role='button'>"+have_map_text_A+"</a>"); document.write("<a href='#page5' data-role='button'>"+have_map_text_B+"</a>"); </script> </p> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>

  • jqueryのthisはイベントが起きている要素?

    jqueryのthisはイベントが起きている要素を示すそうですが、 下記の例の.js-is-input-error1をthisにしても必須項目と出てきません。 こちらの例であればイベントが発生している要素とは、必須項目というテキストが出て来るspanタグがそれに該当する要素ではないのでしょうか? https://codepen.io/anon/pen/VmgPav アニメーションなら動いている要素が、イベントが発生している要素ということでしょうか? イベントが発生している要素というのがどうもはっきりわかりません。 アニメーションなら、(div.anime).animation()ならdiv.animeがイベントが発生している要素ですよね。 (button).click() { (div.anime).animation() } であればbuttonではなくdiv.animationがイベントが起きている要素ですよね?

  • 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 をバインドしたいのですが、それはなにかいい書き方あれば教えてください

  • DIVを選択すると一部のDIVを僅かに大きくする?

    画像のようにDIVで要素を構成しているとします。 DIV(B)の中にあるDIV(C)~(G)の要素に触れた場合、DIV(A)が僅かに大きくなるようにしたいのですが、jQueryとかでどのようなメソッドを使ったりすればいいでしょうか?

  • jquery ajax 外部html 読み込み

    現在、数年前にjquery(v1.4.3)を用いて制作したページの更新を行っており それに伴いjqueryも最新版(v1.11.1)への移行を試している最中なのですが ajaxの外部htmlを読み込む処理が実行されなくなり困っております。 旧バージョンとではメソッドの記述法が異なることは理解できておりますが 色々と書き換えてみたものの、以前のように動作させる事ができません。 以下がそれぞれの記述になりますが、もし問題にお気付きになられましたら ご指摘いただけますと幸いです。 jquery(v1.4.3): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, success: function(html){ var $div = $("#add"); $div.html(html); }, error: function(xhr, status, errorThrown){ alert("not found."); } }); } jquery(v1.11.1): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, }) .done(function(html){ var $div = $("#add"); $div.html(html); }) .fail(function(xhr, status, errorThrown){ alert("not found."); }); }

    • ベストアンサー
    • AJAX
  • jquerymobileのページ遷移のような遷移

    いつもお世話になっております。 jquerymobileのページ遷移のような遷移を行いたいのですが、 イメージ(スライドはしなくても可) URL:http://billboardtop100.net/jquery_mobile/slide/slide.html 流れとしては、ページローディングしている最中、画面がオーバーレイしながら、 ローディングのアニメーション画像を表示し、 ロードが完了したら、スライドしてURL先へリンクする というイメージなのですが(スライドはしなくても可) ajaxとかそういう技術を使わないと、スムーズに遷移しないのでしょうか、、 以下に作ってみたサンプルを記載しますが、 単純にオーバーレイしてからリンク先へアクセスしているので、 読み込みも遅くなりますし、以下のコードだと、ロードの画像が真ん中にきません、、 そして画像を隠す動作が一瞬ちらついてしまいます、、、 html <div id="shade"><img src="/img/ajax-loader.gif" alt="ローディング中"></div> <section data-role="content"> <ul data-role="listview"> <li><a href="/aboutus.html" data-transition="slide">hoge</a></li> <li><a href="sample.html" data-transition="slide">hoge2</a></li> <li><a href="sample.html" data-transition="slide">hoge3</a></li> </ul> </section> js jQuery(function(jQuery){ jQuery("#shade").css({ opacity: '0.6', display: 'none', position: 'absolute', top: '0', width: '100%', height: '100%', background: '#000', zIndex: '1' }); jQuery("a[href]").click(function(e){ link = jQuery(this).attr("href"); if (!link.match(/#/i)) { e.preventDefault(); jQuery("#shade").css('display', 'block'); } }); }); カッコいいページ遷移がしたいです。。 是非ご教授下さい。 どうぞよろしくお願いします