jQuery：onclick イベントが動作しない場合

jQuery() から要素をクリックする場合は以下のように .click() や .trigger('click') が使用できる。

// .click() を使う場合
$('#my_element').click();

// .trigger() を使う場合
$('#my_element').trigger('click');

しかし、詳しい原因はわかっていないが上記の処理で発動しないケースがあった。
その場合は、DOM を取得して DOM の .click() を実行すると通る場合がある。

// DOM の click() を呼び出す
$('#my_element').get(0).click();

JavaScript: <input type="image"> で座標を送る

<form> 内の <input type="image"> は画像をクリックした時の、
マウスカーソルの座標（画像の左上の 0,0 とする相対座標）も送信する。

jQuery でお手軽にクリックイベントを実行すると、
座標として x = 0, y = 0 が送られる。

JavaScript による自動クリックの対策として、
<input type="image"> のクリック時の座標がセットされていることや、
(0, 0)以外の座標でなければリクエストを拒否するサイトも存在する。

JavaScript から座標をそれっぽく送りたい場合は、
createEvent() と initMouseEvent() で
座標を指定したマウスクリックイベントを作成・実行すれば良い。

// 検索ボタン(をクリックする場合)
var searchButton = document.querySelector('input[name=search]');
var event = document.createEvent('MouseEvents');
event.initMouseEvent(
 'click',
 true,
 true,
 window,
 0,
 0,
 0,
 $(searchButton).position().left + 15,  // X = 15
 $(searchButton).position().top + 15,  // Y = 15
 false,
 false,
 false,
 false,
 0,
 null
);
searchButton.dispatchEvent(event);

参考
<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった | それマグで！
http://takuya-1st.hatenablog.jp/entry/2014/12/05/145944

jQuery: 要素内の HTML を無視したテキストを取る

.html() だと HTML を含めた内容を取れる。
.text() だと HTML を無視した内容を取れる。

HTML
<div id="my-div">Hello <strong>World !</strong></div>

$('#my-div').html();  // Hello <strong>World !</strong>
$('#my-div').text();  // Hello World !

Chrome アプリ： 内の console.log() を jQuery で取得

Chrome アプリでは <webview> 要素を設置することで、
外部サイトをアプリ内に表示することができる。

<webview> 内で発生するイベントは、
<webview> を含む親（embedder）から JavaScript 経由で取得できる。

<webview> 内で console.log() を使用する場合は、
consolemessage イベントを使って親要素側で改めて出力しなければ確認できない。

jQuery の場合は originalEvent の中に入っているイベントから取得する必要がある。

var webview = $('#my-webview');

// webview 内で console.log() が使用されると consolemessage イベントが発生
webview.on('consolemessage', function(e) {
    // 引数内の originalEvent.message にメッセージが渡される
    console.log(e.originalEvent.message);
});

jQuery の .on() でバインドした場合は、
本来のイベントオブジェクトは originalEvent 内に格納されるので注意。

jQuery: 選択されたラジオボタンの取得

セレクタで :checked を使用するとチェックされている要素を取得できる。
必要であれば name 属性も指定する。

var selected = $('input[name="my_input"]:selected');
alert('選択されたのは' + selected.val() + 'です');

jQuery.animate() で background-size が動かない

jQuery.animate() では background-size などに２つの数値を渡すう場合、アニメーションが動かないらしい。
仕方なく、jQuery での実装は諦めて CSS transition の scale で代用した。

css transition of background-size in IE 10 | stackoverflow
http://stackoverflow.com/questions/16892500/css-transition-of-background-size-in-ie-10

Google Feed API で ameblo の最新記事を取得

Google Feed API で ameblo の最新記事を取得するサンプル。
jQuery も使用。

$(function() {
    var FEED_URL = 'http://rssblog.ameba.jp/my-blog/rss20.xml';
 
    var feed = new google.feeds.Feed(FEED_URL);
    feed.setNumEntries(30);
    feed.load(function(result) {
        if(!result.error) {
            result.feed.entries.forEach(function(entry) {
                if(!/^PR:/.test(entry.title)) {
                    console.log(entry);
                }
            });
        }
    });
});

fancybox.js で $.browser エラー

fancybox を使用しているページで $.browser が使用できないエラーが出ていました。
jQuery のバージョンが 1.8 までしか対応していないことが原因のようでした。
jQuery 1.11 → 1.8 へ変更したところ解消出来ました。

参考
Fancybox doesn't work with jQuery v1.9.0 [ f.browser is undefined / Cannot read property 'msie' ] | stackoverflow
http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

JavaScript のソースマップファイル

jQuery を使用しているサイトでたまに .map ファイルが存在しない
というエラーが出ていることがある。

調べてみたところ .map ファイルはソースマップといい、
変換前と変換後の ファイルの対応関係を表しているものらしい。

ミニファイされたコードでエラーが発生した時に、
元々のソースコードでいうところのエラー発生位置を通知することができる。
他にも Coffee Script などから変換した JavaScript のエラー箇所が、
元々の Coffee Script のどの部分のエラーなのかを知ることができたりする。

jQuery の .map ファイルも公式で配布されているので、
サーバ上に配置するとエラーは発生しなくなる。

ソースマップについてはこちらがとてもわかりやすいです。
#JSオジサンで Source Map について話してきました - document
http://imaya.blog.jp/archives/7169783.html

Google CDN の jQuery UI で datepicker を日本語に

Google CDN で jQuery UI を読み込んだ後に、
以下のファイルを読み込むと日本語化される。

http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

jQuery: Ajax でエラーが出るときのレスポンス確認

dataType を json にして jQuery の $.ajax() で通信している時に、
error に処理がわたってしまう場合、
パースエラーが発生していることがあります。

とりあえずサーバからのレスポンスを見てみるとエラーの原因が分かりやすいです。
以下のように一時的に dataType を text にして、
console.log() や document.write() で表示してみると良いと思います。

$.ajax('target_url', {
    type: 'POST',
    dataType: 'text', // text に変える
    data: {
        client_data: 'my_data'
    },
    error: function() {
        // エラー
    },
    success: function(response) {
        document.write(response);
        return;  // エラーを表示して抜ける
        ...
    }
});

jQuery.ajax() で "TypeError: Type error"

data に渡すデータタイプが間違っている時に上記エラーが出ます。
例えばコンテキスト（this）を渡していたりするとエラーが出ます。

$.ajax('uri', {
     type: 'POST',
     data: {
         attr: this  // "TypeError: Type error"
     }
});

data に渡している変数をチェックしてみると解決できるかもしれません。

Jcrop で画像が横にはみ出てしまう場合

画像がロードされていない状態で Jcrop を実行すると、
幅が画像ファイルの元々の幅として設定されてしまいます。
load イベントを使って設定するとはみ出ません。

$('#target-img').on('load', function() {
    $(this).Jcrop({
        // 各種オプション
    });
});

jQuery の属性セレクタが動かないとき

jQuery では属性を使ったセレクタを使用することができます。
例えば、特定の src を持った <img> 要素を取得する場合は

$('img[src=my_image.png]');

属性セレクタを使った時に Syntax エラーが発生する場合があります。
この場合は指定した属性の値が URL などの場合にパースに失敗して発生します。
以下のように検索する値をダブルクォートで囲むようにすると動作します。

$('img[src="my_image.png"]');

Jcrop で選択を解除できないようにする

JavaScript で使用できる画像の範囲選択ライブラリ Jcrop で、
選択した領域を解除できないようにする方法です。
実際には解除された直後に範囲を再選択しています。
Jcrop は MIT ライセンスで使用可能です。動作には jQuery が必要です。

サンプルコードはこちら
デモはこちら

Jcrop では画像から範囲を選択した時に onSelect イベントが発生します。
選択された状態で画像の上を「クリック」すると選択状態が解除されて
onRelease イベントが発生します。
選択状態で再度ドラッグした場合は再選択となり、
onRelease が発生せずに直接次の onSelect が発生するので注意が必要です。

onSelect イベントが発生した時に、選択範囲を保存しておきます。
onRelease イベントが発生した時に選択範囲をすぐに setSelect() メソッドで、
再選択状態にすることで選択が解除されていないかのように見せることができます。
（実際には一瞬解除されます）

/**
 * Jcrop で選択範囲をキャンセルさせないテスト
 */
$(function() {
    var api = null,  // JcropAPI
        selected = null;  // 選択された範囲

    $('#jcrop-img').Jcrop({
        onSelect: function(area) {
            selected = area;
        },
        onRelease: function() {
            if(selected == null) {
                return;
            }
            api.setSelect([selected.x, selected.y, selected.x2, selected.y2]);
        }
    }, function() {
        api = this;
    });
});

※そもそも click イベント自体を受け付けないようにしてもできそうですが・・・。

iframe 内の JavaScript を実行する

JavaScript でグローバル領域に定義した関数は window オブジェクトのプロパティとなる。
jQuery を使って iframe 内の window オブジェクトの関数を呼び出す場合は以下のように書く。

$('#target-iframe').get(0).contentWindow.myFunction();

NicEdit: テキストの変更をリアルタイムに監視する

JavaScript の WISYWIG エディタ NicEdit は MIT ライセンスで使用できます。
リアリタイムに編集状態を取得したい場合は keyup や click イベントを使用します。

<textarea> 要素を NicEdit で WYSIWYG エディタを生成した場合、
テキストを入力する領域が <textarea> の１つ上に生成され、
太字や斜字などのボタンが更にその１つ上に生成されます。
jQuery の prev() を使って、上記の２つの要素を取得してイベントを設定します。

$('#editor').prev().on('keyup', update);
$('#editor').prev().prev().on('mouseup', update);

これだけでは不十分です。
フォントサイズやフォントフォントファミリーを選択する場合は、
.nicEdit-pane というクラスの要素がその都度生成されます。
こちらは document にイベントを割り当てて、
途中で生成された要素であってもイベントを取得できるようにします。
パネルをクリックしてからエディタに反映されるまで若干時間が掛かるので、
100ms 程度待ってからデータを取得するようにしています。

ソースコードは GitHub へアップロードしてあります。
デモはこちらへアップロードしました。

jQuery: iframe の読み込み完了後の動作

JavaScript で <iframe> のコンテンツが読み込み完了した後に操作する場合は load イベントを使用します。

$('#target_iframe').on('load', function() {
    alert("iframe の読み込みが完了しました");
);

JavaScript: 画像をリロードする

JavaScript から <img> 要素の src 属性を変更すると自動的に画像が更新されます。
ただし既にセットされている src と同じものを入力しても再読込されません。
こういった場合は URL にクエリパラメータを付加すると再読み込みが行われます。
クエリパラメータはキャッシュされないように毎回異なるものをセットします。

var src = 'http://example.com/example.jpg';
$('#target_img').attr('src', src + '?' + new Date().getTime());

NicEdit で幅が狭くなる対策

JavaScript の WYSIWYG エディタの NicEdit はサードパーティ製の日本語版も開発されており、MIT ライセンスで使用できるため便利です。

NicEdit ではスクリプトをロードした後に、ページ上の全ての <textarea> を WYSIWYG エディタに変換する関数を持っています。

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="path/nicEdit_ja/nicEdit.js"></script>
        <script>
            $(function() {
                nicEditors.allTextAreas();
            });
        </script>
        <style>
            textarea {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <textarea></textarea>
    </body>
</html>

この時、エディタの幅は元の <textarea> の幅と同じになるはずなのですが、
CSS で <textarea> の幅を 100% にしていても、
画面いっぱいに広がらず、狭い幅のエディタが生成されてしまう場合があります。
レンダリングの状態によって変わり、jQuery.ready() などを使っても、
解決できませんでした。

この場合は <textarea> の要素に style 属性として、
直接幅を定義することで回避できます。
nicEdit が <textarea> の style 属性を直接セットするため、
CSS で定義した幅が優先されないケースが有るため、
今のところは <textarea> の style 属性を直接指定しておくのが良いかと思います。

<textarea style="width:100%"></textarea>

NicEdit については日本語版のページよりも公式の Wiki が詳しいです。