タグ

jQueryに関するkikunantokaのブックマーク (7)

  • jQueryのappendで追加した要素のclickイベントが動かない場合 | MiLKySHADe

    jQueryのappendで追加した要素のclickイベントが動かない場合 by MiLKySHADe · 公開済み 2013年6月12日 · 更新済み 2013年7月24日 //ボタンクリック時にアラート $("#sampleBtn").click(function() { alert("クリック!"); }); //クリック時にアラートを出すボタンをbodyに追加 $("#addBtn").click(function() { $("body").append('<a id="sampleBtn">サンプルボタン</a>') }); 上記のコードではclickイベントが発生しない。 .bindや.clickは新たに追加されたDOMに影響を与えないからだ。 しかしon関数を使うことで容易に解決できた。 on関数は.bindや.live、.delegateの後継となる上位関数。 //ボタン

    jQueryのappendで追加した要素のclickイベントが動かない場合 | MiLKySHADe
  • jQuery.click() vs onClick

    I have a huge jQuery application, and I'm using the below two methods for click events. First method HTML <div id="myDiv">Some Content</div> jQuery $('#myDiv').click(function(){ //Some code }); Second method HTML <div id="myDiv" onClick="divFunction()">Some Content</div> JavaScript function call function divFunction(){ //Some code } I use either the first or second method in my application. Which

    jQuery.click() vs onClick
  • jQueryにおけるattrとpropの違いと使いドコロまとめ - Qiita

    checkboxやradioのチェック状態を調べる際にはattrではなくpropを使うのが良い。 attrでも取れないこともないですが、propで取得する方が処理が早いです。 特にIEの場合、inputに対するdisabledの処理がものすごく重く、attrでdisabledやcheckedの処理を沢山していると、無駄に最悪な感じで負荷がかかります。 attrとpropの取得の違い またこの2つは、同じ値を取得してるようで異なる値を取得するので注意。 例えば //チェックした値を取得するよー $(":checkbox").click(function() { alert($(this).prop('checked')); alert($(this).attr('checked')); }); の場合、 チェック時 prop true attr checked 非チェック時 prop fal

    jQueryにおけるattrとpropの違いと使いドコロまとめ - Qiita
  • 私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど)

    こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。(たまにjQueryが必須でないものもあります。) ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス

    私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど)
  • jQueryで背景画像をアニメーションで無限ループさせる

    画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない! html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin

    jQueryで背景画像をアニメーションで無限ループさせる
  • jQueryプラグイン 50

    少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日の方なので、ひらがなやカタカナといった日語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル

    jQueryプラグイン 50
  • jQuery.uploadを使った、画像のサムネイルを表示するフォームのデモを作りました。 - Toro_Unit

    以前、jQuery.uploadでアップロード画像のサムネイルの作成というエントリーを書いたので、それの実装を作ってみました。アップロードする画像を選択すると、アップロードされ、それのサムネイルが表示されます。 また、ページを離れるときに画像をJavascriptで削除していますが、実際に使うときは使わない場面も多いと思いますので、その部分は適当に削除するなり、なんなりして下さい。 デモ:http://demo.torounit.com/jquery.upload/ script.js(ajaxでのアップロード等々) [js] jQuery(function($){ //送信ボタンの非表示 $(‘#submit’).hide(); //フォームの内容が変更されたとき $(‘#img’).change(function() { var preview = $(‘#preview’); //現

    jQuery.uploadを使った、画像のサムネイルを表示するフォームのデモを作りました。 - Toro_Unit
  • 1