• 締切済み

onChange2回実行

すみません。 今は下記のようにjquery.1-4-2.min.jsを利用しています。 -------------------------------------- $(function() { var el; $("select.default") .each(function() { el = $(this); el.data("origWidth", $(this).css("width")) }) .mouseenter(function(){ $(this).css("width", "auto"); if(($(this).context.clientWidth)< Number($(this).data("origWidth").replace(/px/,"")) ||"100%" == $(this).data("origWidth")){ $(this).css("width", $(this).data("origWidth")); } }) .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); }); }); ------------------------------------ Htmlでselectドロップダウンについて、onchange=onUserChange(value)をします。 但し、select dropdownを選択したら、このonUserChangeが二度呼び出されました。 ソースDebugし、下記のJquery利用するため二度実行します。 ----------------------------------- .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); }); ------------------------------------ どうしてonUserChangeが二度実行しますか。私は一回だけ欲しいです。。。 ご教えていただけませんか。

みんなの回答

回答No.1

> .bind("blur change", function(){ と書かれていますので、onchangeで1回、onblurで1回、合計2回ではないのでしょうか? >私は一回だけ欲しいです。。。 どちらか適切な方を残し、他方を消せばいいかと思います。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • サファリでポジション指定のJavascriptがうまく作動しません

    詳しい方ぜひお力をお借りしたいのですが。 以前IE用で教えていただいたオンマウスでボックスを中央に配置する スクリプトを教えていただいたのですが、Safariですとこれがうまく 作動してくれません。IEではどんなモニタの大きさでもど真ん中にいくのですが、Safariですと左に寄ってしまうのです。 これをSafariでも正常に機能させるにはどのような記述にすればよいのかを考えていましたがうまくいかないので質問させていただきます。 function show( text ) { var el = document.getElementById( "box" ); document.getElementById( "text" ).innerHTML = text; el.style.visibility = 'hidden'; el.style.display = 'block'; var width = el.clientWidth; el.style.display = 'none'; el.style.visibility = 'visible'; el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + document.body.scrollTop; el.style.display = 'block'; } function hide() { var el = document.getElementById( "box" ); el.style.display = 'none'; } で、 el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + この部分でIEでは問題ないのですが、Safariでは機能しません。 どうかお助けください。 よろしくお願いいたします。

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

  • 条件により押せないボタンを作りたい

    2つのセレクトボックスがあり、どちらも選択していれば「検索」ボタンを押せるが どちらか1つでも選択していなければ「検索」ボタンを押せない状態にしたいのですが どのようにすれば可能でしょうか? <script type="text/javascript"> jQuery(function() { jQuery('#change_btn').click(function() { jQuery.post('price.php', { size : jQuery('#size').attr('value'), days : jQuery('#days').attr('value') }, callBack); }); }); function callBack(data) { jQuery('#change_area').html(data); } </script> <form action="" id="form1" method="post"> <select name="size" id="size"> <option value="">---選択してください---</option> <option value="s1">サイズ01</option> <option value="s2">サイズ02</option> <option value="s3">サイズ03</option> </select> <select name="days" id="days"> <option value="">---選択してください---</option> <option value="d6">6日</option> <option value="d8">8日</option> </select> <input type="button" id="change_btn" value="検索" /> </form>

  • selectboxとcheckbox連動

    下記ソースについて質問です。 jqueryを使って、 チェックボックスにチェックを入れたら、 一個目のセレクトボックスで選択した値を 二個目のセレクトボックスで選択しているようにしたいのですが、 ここからどうしたらよいでしょうか? 具体的な方法を教えていただけないでしょうか? <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> <!-- jQuery.noConflict(); var j$ = jQuery; j$(function () { j$(":input").focus(function(){ j$(this).css("background" ,"#7DBFE2"); }).blur(function(){ j$(this).css("background" ,""); }) j$(":submit").focus(function(){ j$(this).css("background" ,""); }).blur(function(){ j$(this).css("background" ,""); }) if (j$('input[type=checkbox]:last').attr('checked')) { j$("#selectAir").removeAttr("disabled"); } else { j$("#selectAir").attr("disabled", "disabled"); } j$('input[type=checkbox]:last').click(function() { if (this.checked) { j$("#selectAir").removeAttr("disabled"); j$("#selectAir").change($("#selectAirDelivery option:selected")); } else { j$("#selectAir").attr("disabled", "disabled"); } }); }); --> </script> </head> <body> <select id="selectAirDelivery" name="selectAirDelivery" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> <td width="55%" bgcolor="#FFF8DF"> <input id="chkIrai_sl1608" name="chkIrai_sl1[]" type="checkbox" value="608"><label for="chkIrai_sl1608"></label> <select id="selectAir" name="selectAir" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> </tr> </table> </body> </html>

  • jQueryでスマホ向けページのロールオーバー

    スマートフォン向けページで、記事をタップすると その記事にグレーのオーバーレイがかかり、 指が外れるとオーバーレイが消える効果をつけたいと思います。 CSSだけでは難しそうでしたので、jQueryで空のdivを作成する 方法を考えました。 背景を透過した空のdivを生成するところまではできたのですが、 それを外すことがどうしてもできません。 Javascriptの基本的な文法がわかっていないせいだと思います…。 下記がうまく行かなかったソースです。 removeの記述に問題があるのだと思いますが ご教授の程よろしくお願い致します。 また、この程度JSを使わなくてもCSSだけでできるようでしたら その方法でもかまいませんので教えていただければと思います。 ■JS <script> $(function($){ $( "#hoge a" ) .bind( 'touchstart', function(){ $( this ).prepend( "<div></div>" ); }).bind( 'touchend', function(){ $( this ).unbind(); }).bind( 'touchend', function(){ $( "<div></div>" ).remove( ); }) }); </script> ■HTML <section id="hoge"> <a href="#"> <article> <figure><img src="image.png" width="100" height="120"></figure> <p>テキストテキスト</p> </article> </a> </section> ■CSS #hoge article { position: relative; } #hoge article figure { z-index: 1; } #hoge a div { background-color: #000; opacity: 0.3; width: 100px; height: 150px; position: absolute; top: 0; left: 0; z-index: 2; }

  • jcueryのスライドするナビゲーションについて2

    「jcueryのスライドするナビゲーションについて」下記ページにて質問させてもらったものです。 http://okwave.jp/qa/q6830580.html 横スクロールサイトでスライドナビゲーションを使用しており 同じページ内の各コンテンツに移動した際にスライドも停止させるというのを 回答者さまのご回答どおり、以下のjsで実現することができました。 $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $("li a", $mainNav).click(function(){  $magicLine   .data("origLeft", $(this).position().left)   .data("origWidth", $(this).parent("li").width())   .stop().animate({    left: $magicLine.data("origLeft"),    width: $magicLine.data("origWidth")   }); }); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); ただまた一つ問題に気づいてしまったので質問させてください。 ナビゲーションのボタンクリック後にスライドはうまく動作するのですが、 更新ボタンを押すとページは、移動後のコンテンツのままで スライドがまたTOPに戻ってしまいます。 更新ボタンをおしてもナビゲーションを表示しているページに合わせてストップさせるか または、コンテンツもTOPに戻すかどちらかの方法で対処できたらと思っています。 どなたかお分かりの方がおられましたらお教え頂いても宜しいでしょうか。 どうぞ宜しくお願いいたします。 デモはこちらになります。 http://css-tricks.com/examples/MagicLine/

  • jQueryでCSSの背景画像を切り替えたい

    見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。 jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、 パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。 WordPress環境で下記のコードを使用しています。 ご教授の程、よろしくお願い致します。 【 jQuery】 ○ディレクトリ : テーマフォルダ/js/change.js jQuery(function() { jQuery("h3 div.class").hide(); jQuery("h3").click(function() { jQuery(this).next().slideToggle("fast"); jQuery(this).css("background-image" , "url('img/pic2.jpg')"); }); }); 【CSS】 ○ディレクトリ : テーマフォルダ/style.css h3 { background: #7c8187; background-image: url(img/pic.jpg); cursor: pointer; } 【画像】 ○ディレクトリ : テーマフォルダ/img/pic.jpg テーマフォルダ/img/pic2.jpg

    • ベストアンサー
    • CSS
  • jqueryのスライドするナビゲーションについて

    現在、以下のjqueryを使用して横スクロールサイトを作成しているのですが、 (Smooth Vertical or Horizontal Page Scrolling with jQuery) http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ ナビゲーションに別のjQuery MagicLine Navigationというjqueryのスライドするメニューを配置しています。 デモ http://css-tricks.com/examples/MagicLine/ このスライドするラインを表示中のコンテンツに合わせてストップさせたいのですが、 横スクロールサイトでコンテンツが一つのhtmlファイルのため 止めることができません。 これを止める方法があれば実現させたいのですが、 どなたかお分かりの方がおられましたらご教授頂けませんでしょうか。 <javascript> $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); <html> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#">Buy Tickets</a></li> <li><a href="#">Group Sales</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">The Show</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Magic Shop</a></li> </ul> </div> どうぞ宜しくお願いいたします。

  • jQueryでCookieがあるか判別する方法。

    現在ホームページを制作している初心者です。 jQueryでCookieがあるか判別する方法を教えて下さい。 formの入力欄に背景画像を使用しています。 現在jQuery内に記述している内容↓ $('id名') .focus(function() { $(this).css("background", "#fff") }) .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(画像名.png) left top no-repeat") } }); 今現在は、 非focus時は画像が表示、 focus時は背景白、 テキスト入力後非focus時は背景白、 という状態で理想どうりなのですが 一度ページを出て、もう一度同じページに入ると 前回入力したものと画像が同時に出力されていて とても見づらい状態です。 jQueryでCookieが残ってない時は画像を表示するという記述をしたいのですが わかりません。 どなたか教えていただけないでしょうか? ちなみに上記のjQueryの記述は、参考サイトでコピペしたものですので 意味は分かってません。

  • jQueryでポップアップの中にポップアップ

    <html> <head></head> <style type="text/css"> .popup { position:absolute;bottom:0;left:0;width:300px;padding:1px 5px;border:solid 1px #000;background:#fff;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.b').live({ /* <= bind? */ mouseenter:function(){ var target = $( $(this).children().filter('.c').attr('href') ); $(this).css('position','relative'); $(this).append('<div class="popup">'+target.html()+'</div>'); }, mouseleave:function(){ $(this).css('position','static'); $(this).children().filter('div').remove(); } }); }); </script> <body> <div id="a1"><p>a1a1a1</p></div> <div id="a2"><p>a2a2<span class="b"><a href="#a1" class="c">#a1</a></span>a2</p></div> <div id="a3"><p>a3<span class="b"><a href="#a2" class="c">#a2</a></span>a3a3</p></div> </body> </html> このような感じで、#a2にマウスカーソルを合わせたらid="a2"の内容が吹き出しのような感じでポップアップし、 その中に含まれる#a1にマウスカーソルを合わせたらそこからさらにid="a1の内容がポップアップする仕組みを作りたいのですが、 ポップアップの上にマウスカーソルを合わせることができずに困っています。 参考:jQuery の hover() について調べたことのまとめ http://d.hatena.ne.jp/tilfin/20080615/1213608859 参考:.live()でhoverイベントに複数の関数をバインドできない http://jsdo.it/cancer6/mh9t 自分で調べてみて分かったことは ・hover(fn1,fn2)はfn1=mouseover,fn2=mouseoutではなくfn1=mouseenter,fn2=mouseleave ・後から追加した要素(ポップアップ)の中の要素にもhoverを有効にするにliveでhoverを設定する必要がある ・liveでhoverイベントを指定するときはmouseenter,mouseleaveの2つに分けて指定する必要がある 上記のコードを保存して見ていただけると分かると思うのですが、 liveにするとポップアップの上にカーソルを合わせることができず、 bindにするとポップアップの上にカーソルを合わせることができます。 ポップアップはclass="b"の子要素となるようにしているので、 ポップアップにマウスカーソルが合わさっている状態=class="b"からmouseleaveしてない状態となっていると思うのですが…。 どのようにすれば「後から追加された要素(ポップアップ)」内にもhoverイベントを適用させつつ、 「後から追加された要素(ポップアップ)」内にマウスカーソルを乗せられる状態にできますか? よろしくお願い致します。

このQ&Aのポイント
  • 非純正インクを使っていたが、純正インクに交換後も印刷できずエラーメッセージが表示される
  • 環境はWindows10で無線LAN接続、関連ソフトや電話回線は不明
  • ブラザー製品のDCP-J973Nに関するトラブルで印刷できない状況
回答を見る

専門家に質問してみよう