チェックしたタイミングでjqueyライブラリを作動させる方法

Question

###【任務】
チェックしたら「jquery.ui.touch-punch.min.js」というライブラリを作動させたいです。

ライブラリ「jquery.ui.touch-punch.min.js」
https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js

次の【作戦A】と【作戦B】では、なぜできないのかご教示いただけませんでしょうか？

###【作戦A】.loadで読み込む作戦
下記をtest.jsに書いて、それと同じディレクトリに「jquery.ui.touch-punch.min.js」を置いてみました。しかしチェックを入れても読み込みが始まってくれませんでした。

▼test.js

(function($){
$(function() {
  $('#check').on('change', function(){
    if ($(this).is(':checked')) {
		 $("body").load("jquery.ui.touch-punch.min.js");
    }
  });
});
})(jQuery);

###【作戦B】ライブラリに書き込む作戦

直接「jquery.ui.touch-punch.min.js」をチェックイベントで囲ってみました。やはり読み込んでくれません。

▼jquery.ui.touch-punch.min.js

(function($){
$(function() {
  $('#check').on('change', function(){
    if ($(this).is(':checked')) {

    ///jquery.ui.touch-punch.min.jsの中身をここに書く

    }
  });
});
})(jQuery);

ちなみに、普段通りfunctions.phpにwp_enqueue_script('jquery.ui.touch-punch.min.js');を書く方法ならばちゃんと読み込んで作動してくれます。
今回はそうでなく、#checkをチェックしたタイミングで、読み込んで欲しいのです。

上の作戦は何がいけないのでしょうか。また正しい方法をご存じの方がいらっしゃいましたら、どうぞよろしくお願いいたします。

Answer 1

ライブラリ本体自体はsrcで読み込んだだけでは何もしません。
その機能を使うように指定が書かれた時に動作します。

つまり、チェックされたときに機能を呼び出せば良いです。

    if ($(this).is(':checked')) {

      $('#hogehoge').draggable();

    }else{
      //解除　（ここは調べてください）
    }

ミニマムサンプル

下記コードで動作確認とれました。（解除部分は書いてません）
参考にしてください。

<input type="checkbox" id="check" name="check">
<div id="widget">draggable</div>        
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

$(function(){
  $('#check').on('change', function(){
    if ($(this).is(':checked')) {
        $('#widget').draggable();
    }
  });
})

チェック外したら解除

draggableのオプションに「draggableを無効にする」があるのでチェックされたときにfalse、チェックはずれたときにtrue　すれば可能です。

• draggable

当該プラグインは内部的にはjQuery-UIのdraggable()の機能を利用しているので同じオプションが指定可能です。

$(function(){
  $('#check').on('change', function(){
    if ($(this).is(':checked')) {
        $('#widget').draggable({disabled:false});
    }else{
        $('#widget').draggable({disabled:true});
    }
  });
})

Comments

[退会済みユーザー]

mts10806さん、ありがとうございます。

>チェックされたときに機能を呼び出せば良い

と仰いますと、ライブラリの機能全体を、「チェックされたときはこうしてね（if）」で囲っている、【作戦B】が正解ということですか？

すると【作戦B】であと足りないのは、elseで解除する点だということでしょうか？

[m.ts10806]

回答が説明不足で申し訳ない。

AもBも「ライブラリの機能を呼び出していないことが問題」です。
なので、作戦Bも正解ではありません。

いずれにしてもライブラリ本体を読み込む記述を何度もするのは全く意味がありません（duplicateがおきる可能性があります）

> 普段通りfunctions.phpにwp_enqueue_script('jquery.ui.touch-punch.min.js')

をしておいた上で、
「チェックされていたら機能を呼び出し、チェックが外れていたら機能を解除する」
が正解です。
つまりチェックされている状態、チェックが外れた状態が取得できればどのような記述でも問題ありません。

[退会済みユーザー]

あぁ、なるほど！わかりました！

普段通りの方法でまずは読み込む。そのままなら実行されるけれど、【作戦B】で「チェックされたらのif」で囲っておけば、実行されるのはチェックされたときになるよ。

ということでしたか！読解力が著しく欠けていてすみません。笑

あと少しお昼休みなのでダッシュでやってみます!!

[m.ts10806]

いえ、コメントの冒頭に書きましたが、
AもBも「ライブラリの機能を呼び出していないことが問題」です。

[m.ts10806]

<script>
function h(){
alert("1");
}
</script>

として用意しておきながらどこからもh()を呼び出していない状態と同じです。

[退会済みユーザー]

なんどもスミマセン。えっと、functions.phpでまずは普段通り呼び出して、それプラス、【作戦B】でチェックされたら実行されるようにする。ということですよね？

「ライブラリの機能を呼び出す」というのは、functions.phpでの普段通りのやつですよね？

そうやって呼び出しておいて、チェックという条件を書き加えてね。と。

で、今それを試したところできなかったのですが、elseでの解除というのはやはり必要でしょうか？

[m.ts10806]

A,Bにこだわるのが良く分かりません。
$("body").load("jquery.ui.touch-punch.min.js");　があるのがA
ないのがB
くらいの違いしかないように思うのですが。

> 「ライブラリの機能を呼び出す」というのは、functions.phpでの普段通りのやつですよね？

違います。
「functions.phpでの普段通りのやつ」は”ライブラリを読み込む”です。
「ライブラリの機能を呼び出す」は
回答に書いた　$('#hogehoge').draggable();　のようにライブラリの機能を実行することです。
決して「jquery.ui.touch-punch.min.jsの中身を書く」ではありません。
ライブラリの使い方は確認されたのでしょうか？

「試した」のがどのようなコードか分からないので回答しようがありませんのでご提示願います。
（コメントを読む限り、あまり正確に理解されていないように思いますが・・・）

解除を提案したのは「チェックしたときのみライブラリを利用したい」とのことなので、
「チェックを外したときにはライブラリの機能を無効化したいのでは」と予想したためです。

[退会済みユーザー]

>「functions.phpでの普段通りのやつ」は”ライブラリを読み込む”です。

ひとまずこの読み込みは必須ですね。これはできているので問題なさそうです。

ちなみに「試した」というのは、「この読み込みをやってから、さらに【作戦B】を追加した」ということです。

で、さて、読み込みができたら、お次は実行なわけですね。

>回答に書いた　$('#hogehoge').draggable();　のようにライブラリの機能を実行することです。

というあたりが、よくわかりません。読みにくいので続きます↓↓

[退会済みユーザー]

if ($(this).is(':checked')) {

$('#hogehoge').draggable();

}else{
//解除　（ここは調べてください）
}

とご回答いただきました。これが .draggable を実行する方法ですよね。ならば、ライブラリを実行する方法は、次のようにすればいいのでは？と思ってしまいます。

if ($(this).is(':checked')) {

//ライブラリの中身すべて

}else{
//解除　（ここは調べてください）
}

こうすれば（これが作戦Bです）、「もしチェックしたら .draggable が実行される」のと同じように、「もしチェックしたら //ライブラリの中身全て が実行される」のではないのでしょうか？

これで実行されるのならば、あとは先ほど必須だったfunctions,phpでの読み込みを加えて、それが上の「試した」になった次第でございます。

うーん、読み込みは大丈夫ですから、「もしチェックしたら //ライブラリの中身全て が実行される」になっていないのだと思いますが…

[m.ts10806]

公式サイトはこれですよね。
http://touchpunch.furf.com/
これの

$('#widget').draggable();

の部分は書きましたでしょうか。
これが「機能の呼び出し」に相当するものです・

これは”idにwidget”とついたオブジェクトに対してdraggableイベント（touch-punchの機能）を追加するものです。

もちろん
<div id="widget"></div>
のように対象にIDをつけるのを忘れていては動きません。

[退会済みユーザー]

あ、それは書いています。IDもあります。

普段通りのfunctions.phpからの読み込みを介した、普段通りの実行はできているのです。

なので、お次は「チェックしたら実行」させる方法だと思ったので、それならば、

if ($(this).is(':checked')) {

//ライブラリの中身すべて

}else{
//解除　（ここは調べてください）
}

のハズだ！！

と、意気込んで「試した」のですが。。

たびたびすみません。

[m.ts10806]

＞こうすれば、「もしチェックしたら .draggable が実行される」のと同じように、「もしチェックしたら //ライブラリの中身全て が実行される」のではないのでしょうか？

いえ、されませんよ？
何度も書いているように「機能の呼び出しをしていない」ことが問題です。
「ライブラリの中身すべて」書くようなことは公式サイトのどこにも書いてないはずです。
「先ほど必須だったfunctions.phpでの読み込み」ができているなら

if ($(this).is(':checked')) {
$('#hogehoge').draggable();
}

として
<div id="hogehoge"></div>

のようにすればチェックされたときにこのdivがdraggableになるはずです。

[m.ts10806]

となると、「チェックされている」が正しく取得できていないだけでは？

[m.ts10806]

後出し部分が多すぎて＾＾；
情報はHTMLも含めて全てご提示いただけると無駄なやり取りが何度も発生せずにすみますので、よろしくお願いします。

[退会済みユーザー]

あーー！！わかりました！

「チェックしたら●●を実行せよ」の●●には、

ライブラリの中身全て

ではなくて、

ライブラリを実行させるdraggableの部分だけ

を書けばよかったのですね！！

>後出し部分が多すぎて＾＾；

ほんっと、笑っちゃいますね。私も「こんなのでわかるわけないよな」っって、コメント書きながら思っておりました。ちょっとこの後だしっぷりはヒドすぎましたね。

さて、今回はできそうな予感がします。ありがとうございます。あとでやってみます！

[m.ts10806]

最初からそのように申し上げているつもりではありましたが、伝わりにくい表現となってしまって大変申し訳ないです。

[退会済みユーザー]

いえ、ほんとうに、普通に読めば、もう、きちんと、そうおっしゃってます！！笑
恥ずかしすぎます。
何度もわけのわからないやつ相手に、どうもありがとうございます。

[退会済みユーザー]

いっちば~ん最初っから仰ってますもんね！笑
私は何を読んでいたのでしょうか。まったく。。

[退会済みユーザー]

お世話になっております。混乱してしまうのでこちらにまとめます。

まずはお導きにこころから感謝です。これだけご迷惑をかけている中でもイヤミっぽく仰ることも一切なく、きちんとご指摘くださり、とても素直にうなずけることばかりでした。

質問情報の不備については、必要最小限を求めた結果でして、長くて冗長なのはやめよう、と素人が気を遣ったつもりの失敗ばかりです。
結局あちらの質問も、別の方のご回答でやはり「足りないよ」とのご指摘でしたね。
しばらく必要情報の見極めには意識していきたいと思います。

「できなかった、じゃやめよう」もまさにそればかりです。まったく歯が立たない今回のようなコード（後述します）には、やはり解読の糸口すらつかめず。あれこれ簡単そうなのを試し、付け加え、最後はぐちゃぐちゃ、結局中断。がいつものパターンです。
とはいえ、先輩のご指摘なので、もうちょっとこれからは意識して食いついてみようと、うーん、がんばって思ってみます！

///////////
//ここまで読まなくて平気です。ただのお詫びと懺悔です。笑
//////////

さて、今回のコードですが、このような形になりました。

https://jsfiddle.net/また機会がありましたら！

やはり、ご提示いただいた .draggable の禁止も効かないようです。
書き方は、こちらであってますよね？

[m.ts10806]

（１つ後のコメント欄では少しイヤミに近いこと書きました。失礼しました。）

ちょっと特殊な環境にいましてjsfiddle.net のRun確認できないので、帰宅後に確認してみます。

というより、もっと仕様というか要件をきちんと整理して「目的・目標」を明確にされた方が良いかと思います。
その「目的・目標」が明確にさえなっていれば、横道に多少それても戻ってこれます。
今は若干「手段」の方に目がいきすぎていて戻れなくなっているように思います。
今一度、本来の筋に立ち返ってみてはいかがでしょうか。

[退会済みユーザー]

いえいえいえ、ほんっとにそんなことないです。勘弁してください。terateilの
使い方が世間的によろしくないのでイヤミばっかり言われてしまっていますけれど、mts10806さんのご指摘なんて、イイオンナのそれですよ。部下の方がとても良い子に育ちそうでうらやましいです。

仕様、案件、まったく考えていないんです。ちょっと取り組むうちに、「これはどうかな」→「これもいいぞ」→「できなかった、じゃやめよう」というばかりなのです。こんな体たらくで失礼してます。

しかし、すごいですね！企業理念がDNAであり、社風を作り、各々の選択の根拠として世間に評価され印象付けられるという流れと同様に、まさに本来の筋！それに立ち返ることの重要性をきちんと説いて頂きました！肝に銘じておきまする。

[m.ts10806]

ふざけてるのか本当に思っているのか、くらいはハッキリして欲しいですね。
ふざけているのならここで下がらせていただきます。
本当に思っているにしても不快に思う表現が幾つも出てきます。
ありがとうございました。

[退会済みユーザー]

あー、そうでしたか！？すごく驚き、残念です。かなりマジメに感謝し、そのまま書きました。なのでそれを伺っても「えー！なんでだろう！」と驚くばかりです。世間は難しいものですね。誠に申し訳ございません。どうか、心から感謝していることだけは、伝わったらうれしいです。。
それでは。ありがとうございました！！

[退会済みユーザー]

せめてもの気持ちです。かわいいネコの動画があるので、いやされてくださいませ。
https://youtu.be/rnj6cnlIjM4?t=130
（ちょうど良いタイミングのURLです♪）

Answer 2

何をしたいのかわかりませんが、スクリプトを読み込むのは.load()ではなく、jQuery.getScript()です。
https://api.jquery.com/jQuery.getScript/

Comments

[退会済みユーザー]

そうなのですね。なるほどなるほど。覚えておきます。どうもありがとうございます。

ところで、調べてみましたところ、そちらは「１回読み込んで、読んだファイルの関数とかをざっと１回実行する」というものですよね？

ではなく、「読み込んだらその中にある関数を何回でも実行してくれる」ような方法はありますでしょうか？

たとえば、ボタンをクリックしたときにおこるイベントが書かれたファイルを jQuery.getScript() で読みこんでも、ボタンをクリックしたときにはそのイベントは発生しない様子です。なので、「何回でも実行してくれる」ような方法があったらいいなぁと思いまして。

[退会済みユーザー]

すみません。話が違うので別で質問を立てておきました。失礼いたしました。m(_ _)m

[x_x]

読んだファイルの関数を勝手に実行したりしません。使い方も、普通に<script>で読み込んだ場合と変わりません。