jQueryでイベントが発火しないときの簡単な対処法 | PisukeCode - Web開発まとめ
「ボタンにイベントを設定したはずなのに発火しない」 「チェックボックスにチェックが入ってもイベントが起きない」 こういう風になぜかイベントが発火しないことはjQueryを使っているとちょくちょく遭遇します。 しかもエラーも出ないし、DOMの読み込み後にイベントを設定してるのに関わらずです。 という訳でイベントが発火しないときの簡単にできる対処法について紹介 イベントが発火しないのはなぜ？ まずなんでイベントが発生しないのか？ ということですが、それは単純にイベントハンドラが登録されていないからです。 そもそもイベントハンドラが登録されてなければイベントは発火しようがありません。 ではどういうときにイベントが未登録になってしまうのか・・・ それは動的にボタンやチェックボックスなどの部品を追加したときです。 これだけだと分かりにくいので少し例を使って説明します。 例えば次のようなHTMLを作成
一般的なAjax通信を実装するには？（$.ajax）
非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。 ← 前回 連載 INDEX 次回 → jQueryでAjax通信の基本的な機能を担うのは、$.ajaxメソッドです。本連載では、すでにload、$.get、$.post、$.getJSONなどのメソッドを紹介してきましたが、これらのメソッドも内部的には$.ajaxメソッドを利用しています。つまり、load、$.get、$.post、$.getJSONといったメソッドは、「$.ajaxメソッドの簡易構文」といえます。 一般的には、それで賄えるならば簡易構文を優先して利用すれば十分です。しかし、非同期通信の動作をより細かく制御したいという状況では、$.ajaxメソッドを、という使い分けになることでしょう*1。 $.ajaxメソッドの構文は、以下
TypeError: e.indexOf is not a function - Oboe吹きプログラマの黙示録
jQuery を書いていて、今まで動いてたのは、 HTML に、iframe タグ、src は適当に何かを指すようにしてあって、表示サイズを０ （＝あえて、隠しておく） <iframe id="otherframe" src="xxxx" width="0px" height="0px"></iframe> 何からのイベントで、load(function(){} )で、印刷プレビューを表示していたのですが、、 $('#otherframe').load(function(){ document.getElementById('otherframe').contentWindow.print(); }); このコード、jQuery 2.x 系では動いてたのに、3.x にしたら、 TypeError: e.indexOf is not a function が発生 jQuery 3.0 で、l
jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う ｜ Tips Note by TAM
JavaScriptでcookieを扱うのは、値のエンコード・デコードや書き込む際の文字列結合、値を取り出す実装など、意外に面倒です。しかし、「jquery.cookie.js」を利用すれば、cookieを簡単に扱えるようになり、シンプルなコードで実装できます。 まずはjQueryとjquery.cookie.jsを読み込みます。 ※jquery.cookie.js は GitHub（https://github.com/carhartl/jquery-cookie）からダウンロードすることができます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> ■cookieの設定 cookieを保存するには
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
テキストエリアの内容を localStorage に自動保存する
タイマーを使い定期的に保存を実行する方法もあるが、手軽さを求めて keyup イベントで保存してみることにした。change や blur イベントも選択肢にあるが、これらはテキストエリアのフォーカスが外れたときに発生するので、テキストエリアにフォーカスを当てたまま、うっかりリロードしてしまうと保存されない事態に陥る。 <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <textarea id="article" placeholder="ここに書き込みます"></textarea><br> <button id="clear">クリアする</button>
FlatなUIが美しいJSレスなUIライブラリ「TopCoat」:phpspot開発日誌
TopCoat FlatなUIが美しいJSレスなUIライブラリ「TopCoat」。 デスクトップ、モバイル対応でレスポンシブ、CSSで作られたUIライブラリです。 Bootstrapよりフラットなデザインが特徴でしょうか。Bootstrapのライバルとなるような物が出てきて、それぞれよい面を取り入れていってほしいですね 関連エントリ フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 BootstrapをベースとしたフリーのUIKit「Flat UI」
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
#19 外部ファイルを動的に読み込む | 【旧版】jQuery入門 - プログラミングならドットインストール
動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
Manuel Boy - Director of Engineering - Phrase GmbH
Internet, Medienproduktion, Programmierung, E-Learning
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Upload Multiple Images using jQuery, Ajax and PHP - CodexWorld
jscolor: JavaScript Color picker with Opacity (alpha channel)