Ajaxで書き加えられたイベントを無効にしたい

jQueryでAjax通信を行い、受け取ったscriptタグを含むデータでhtmlを動的に書き換えています。
不要になったタイミングで、scriptタグを含むタグに対してjQueryのemptyを実行し削除したのですが
前述のscriptタグが実行可能な状態のままになってしまいます。

サンプルコード

index.html

html
1<div id="foo">hogehoge</div>
2<button type="button" id="bar">ajax</button>
3<button type="button" id="baz">empty</button>
4<script>
5    $(function() {
6        $('#bar').on('click', function() {
7            $.get("./ajax.html", function(data) {
8                $("#foo").html(data);
9            });
10            return false;
11        });
12        $('#baz').on('click',function() {
13            $('#foo').empty();
14            return false;
15        });
16    });
17</script>

ajax.html

html
1fugafuga
2<script>
3    $(function() {
4        $('#baz').on('click',function() {
5            alert('OK');
6            return false;
7        });
8    });
9</script>

試したこと

ajaxボタンをクリックすると、divタグにajax.htmlの内容が丸ごと反映されます。
emptyボタンをクリックすると、alertが表示されdivタグの中身が空になります。
この状態でemptyボタンを再びクリックすると再度alertが実行されてしまいます。

もう一度ajaxボタンをクリックすると、再びdivタグにajax.htmlの内容が反映されます。
そしてemptyボタンをクリックすると、今度はalertが2回実行されてしまいます。
更に繰り返すと3回、4回とalertの実行回数が増えていってしまいます。

一度追記したイベントを完全に削除するにはどうすればよいのでしょうか？
どなたかご教授いただければ幸いです。

解決しました

追加されたイベントハンドラにnamespaceを設定し
該当のイベントハンドラのみを削除することで目的を達成できました。

index.html

html
1<div id="foo">hogehoge</div>
2<button type="button" id="bar">ajax</button>
3<button type="button" id="baz">empty</button>
4<script>
5    $(function() {
6        $('#bar').on('click', function() {
7            $.get("./ajax.html", function(data) {
8                $("#foo").html(data);
9            });
10            return false;
11        });
12        $('#baz').on('click',function() {
13            $('#foo').empty();
14            $("#baz").off('click.piyo');
15            return false;
16        });
17    });
18</script>

ajax.html

html
1fugafuga
2<script>
3    $(function() {
4        $('#baz').on('click.piyo',function() {
5            alert('OK');
6            return false;
7        });
8    });
9</script>

行動規範の内容に同意します

回答3件

jqObj.load()を使ってはいかがでしょうか。

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

.load() | jQuery API Documentation

（勝手訳：.load()がサフィックスセレクタなしURLで呼ばれた場合、その内容は.html()にスクリプト除去前に渡されます。スクリプトブロックは捨てられる前に実行されます。もし、.load()がセレクタ表現をURLに追加した場合、スクリプトはDOMが更新される前に捨てられるため、実行されません。）

投稿2019/09/27 07:39