jQuaryで記述されているliveが使用不可となり意図する動作が出来なくなってしまいました。

Question

前提・実現したいこと

jQuaryで記述されているliveが使用不可となり意図する動作が出来なくなってしまいました。
ソースコードをどのように変更すればよいかご教授いただきたいです。
当方プログラミングについて詳しくありませんが、ご指導よろしくお願いいたします。

エラー発生までの経緯
Wordpressにてサイトを運営しています。
サーバー移行によりphpとWPのバージョンが以下のように代わりました。
PHP 5.4.45　→　PHP 7.3.25
WordPress 4.7.5　→　WordPress 5.6
これにより以下の様なエラーメッセジが出て、
WPで使用しているテーマのjQuaryの動作が不能となってしまいました。

発生している問題・エラーメッセージ

Uncaught TypeError: jQuery(...).live is not a function
atu HTMLDocument.<anoymous> (common.js?v=1.0:19)
at e (jquery.min.js?ver=3.5.1:2)
at t (jquery.min.js?ver=3.5.1:2)

該当のソースコード

<div original-title="表示" class="etips menu-toggle menu-toggle-off">
Toggle
</div>

	//Sidebar toggle function1
	jQuery(".menu-toggle-off").live('click',function () {
		jQuery(".social-header").css({"visibility":"hidden"});
		jQuery('.container').stop().animate({left:'-1050','opacity':'0'},500, function() {
			jQuery(".container").css({"display":"none"});
		});
		jQuery(".homemenu").stop().animate({'opacity':'0'},150, function() {
			jQuery(".mainmenu-navigation").css({"display":"none"});
		});
		jQuery('.menu-toggle').removeClass('menu-toggle-off');
		jQuery('.menu-toggle').addClass('menu-toggle-on');
		jQuery('.mcycletextwrap').css({"visibility":"hidden"});
		jQuery('.logo').css({"visibility":"hidden"}); 
		jQuery('.background-fill').css({"visibility":"hidden"}); 
	  });
	
	//Sidebar toggle function2
	jQuery(".menu-toggle-on").live('click',function () {
			jQuery(".homemenu").stop().animate({'opacity':'1'},500);
			jQuery(".mainmenu-navigation").css({"display":"block"});
			jQuery('.menu-toggle').removeClass('menu-toggle-on');
			jQuery('.menu-toggle').addClass('menu-toggle-off');
			jQuery(".container").css({"display":"block"});
			jQuery('.container').stop().animate({left:'0','opacity':'1'},500);
			jQuery('.mcycletextwrap').css({"visibility":"visible"});	
			jQuery(".social-header").css({"visibility":"visible"});
			jQuery(".logo").css({"visibility":"visible"}); 
			jQuery('.background-fill').css({"visibility":"visible"}); 
	});

試したこと

ChromeのConsoleで確認したところ、
liveが使用不可となっていたようなので、liveをonに書き換えましたが、
一度目のクリックでSidebar toggle function1は機能するものの、
二度目のクリックのSidebar toggle function2は機能しませんでした。

2度目のクリックでは何もおらない状態で、
ChromeのConsole上でも何も変化ありませんでした。

補足情報（FW/ツールのバージョンなど）

使用環境
Mac OS バージョン: 10.13.6
Google Chrome バージョン: 87.0.4280.88（Official Build） （x86_64）
PHP 7.3.25
WordPress 5.6

Comments

[miyabi_pudding]

HTMLも記載いただいたほうがいいかと。
おそらく、
class="menu-toggle-off menu-toggle"
と適用させていますよね？

[stag]

ご返答ありがとうございます、該当部分のHTMLを追記いたしました。

[miyabi_pudding]

ありがとうございます。
私の回答で原因は間違い無いでしょう。
ご参考下さい。

Answer 1

$(セレクタ).live(イベント名, ハンドラ)の書き替えは、$(document).on(セレクタ, イベント名, ハンドラ)のようになります（公式）。

Comments

[stag]

ありがとうございます、初心者すぎてセレクタ、イベント名、ハンドラが
どの部分にあたるのかわからず修正出来ませんでした。

以下のように変更してみましたが、もちろん動きませんでした。

jQuery(".menu-toggle-off").live('click',function () {
↓
$(document).on(".menu-toggle-off", 'click', function ()) {

[miyabi_pudding]

横槍失礼します。
書き換えはそれで合っていると思いますが、動作しませんか・・・？

[stag]

ご確認ありがとうございます、動作しませんでした。
consoleで確認するとSyntaxErrorがでていました。

[miyabi_pudding]

$(document).on(".menu-toggle-on", 'click', function ()) {
のように、-offよりも、-onの方にむしろ必要です。
（-onは最初は存在しないため、ラッパーにイベント付与が必要）

[miyabi_pudding]

SyntaxErrorとなると、別の原因（構文エラーなので、何か基本的な書き方が間違っている）なので、
()や{}の入子構造が間違っている気がします。

[miyabi_pudding]

何度もすみません、
$(document).on(".menu-toggle-on", 'click', function ()) {

ではなく、

$(document).on(".menu-toggle-on", 'click', function () {

ですね。
間に、余計な)が入ってます。

[stag]

$(document).on(".menu-toggle-off", 'click', function () {
閉じカッコ「 ) 」を消すとSyntaxErrorがなくなりましたが、
以下の様にconsoleでは出ており、やはり動作しませんでした。

Uncaught TypeError: $ is not a function
at HTMLDocument.<anonymous> (common.js?v=1.0:19)

[KazuhiroHatano]

引数の順番、セレクタとイベント逆じゃないですか？

[stag]

ありがとうございます、以下のように逆にしてみましたが動作しませんでした。
$(document).on('click', ".menu-toggle-on", function () {

[KazuhiroHatano]

$ is not a functionのエラーはjQueryがnoConflictしてると起きるエラーです

jQuery(function($){
/*実行したいコード*/
});

のように書いて$をjQueryにしましょう

[stag]

みなさまほんとうにありがとうございます。
以下の様に$をjQueryに書き換えたら出来ました。

jQuery(document).on('click', ".menu-toggle-off", function () {

全くの素人ですみません、勉強になりました。

Answer 2

live/bind/delegateはすべてonに集約されています

Answer 3

liveメソッドと、onメソッドの仕様の違いです。
liveメソッドは、要素が存在しなくとも、イベントを当てられるメソッドのため、
その要素が後に出現した時にも、イベントが発動します。
しかし、onメソッドは、定義時に存在している要素にしかあたりません。
なので、後半の、
jQuery(".menu-toggle-on").liveは、onにすると、空振っている、ということです。

なので、イベント処理を、共通のクラスに当て、（今回の場合は、menu-toggleですね）
存在しているクラスによって（menu-toggle-onか、menu-toggle-off）、処理を反転させる、といった工夫と考え方が必要になります。

Comments

[maisumakun]

後から増えたときなどのことを考えれば、上の要素にイベントを付ける形のほうがいいかと思います（それがliveの動作ともマッチします）。

[miyabi_pudding]

なるほど・・・。
そうですね、挙動変わらないよう書き換えの方が混乱も少なそうですしね。