3

jQueryのdelegate系(on/off)で、例えば以下のようにやると、<form>でもclickイベントが発動してしまうと思います。

var selector = 'a, form';

$(document).on('click submit', selector, function() {
    // something
});

これを、var selector = 'a, form'; の部分は変えない前提で、<a>はclickイベントのみ、<form>はsubmitイベントのみ発動するようにできますでしょうか?

ちなみに、以下のようなものを試してみましたが動作しませんでした。
(どちらも発動されてしまいます)

var selector = 'a, form'; // ここは変えられない

$(document).on('click submit', selector, function() {
    // something
});

$(document).off('submit', 'a'); // <a>はsubmitイベントを無効にしたい
$(document).off('click', 'form'); // <form>はclickイベントを無効にしたい

// これもダメでした。
$('a').off('submit');
$('form').off('click');

追記

やりたいこととしては、ajaxで他ページを取得し表示するというプラグインを作成しており、<a>タグ(ボタン系)と<form>に対応したいです。
ajaxでコンテンツを取得後、さらにその中に<a>や<form>等があれば、それも適用対象にしたいという感じです。

kijtra
  • 113
  • 1
  • 11
  • どのようなAPIのプラグインを作ろうとしているのか、説明を追記してみてはいかがでしょうか。もしかしたら単純に$(document).on()するよりも良い案が提示されるかもしれません。 – mok2pok Mar 26 '15 at 08:28
  • @mok2pok ありがとうございます!伝わりづらいかもしれませんが追記してみました。 – kijtra Mar 26 '15 at 09:13
  • aタグやformタグに対するイベント(click/submit)を監視し、イベントを拾ったら「本来遷移するはずのページ」へのリクエストをAjaxで投げて、取得したHTMLを表示する・・・監視対象の要素は、$("a,form").pluginname()とか$(".pageview").pluginname()とか、そういう風に指定するようなプラグインでしょうか。 – mok2pok Mar 26 '15 at 09:54
  • @mok2pok そうです!その通りの動作を想定しています。 – kijtra Mar 26 '15 at 10:52

4 Answers4

2

最初のvar selecter にいれるところは配列の方がよさそうですね。

var selecter = 'a, form';
var ss = selecter.split(', ');
$.each(ss, function(i, d){
    $(document).on('click submit', d, function() {
        console.log(123+d);
    });
});
$(document).off('click', 'a');
nbys
  • 21
  • 1
1

なにやら複雑なバックグラウンドが見え隠れしていますが、とりあえず単純に無効化して登録し直しはダメなのですか?

色々やり方はあるのでこれがダメならちゃんとした版でお答えします。

var selector = 'a, form';

$(document).on('click submit', selector, function() {});
$(document).off('click submit', selector, function() {});

$(document).on('click', 'a', function() {
  alert('click');
  // do click process
});
$(document).on('submit', 'form', function() {
  alert('submit');
  // do submit process
});
kotatsu
  • 2,142
  • 4
  • 17
  • 31
1

意図はよく分かりませんが、イベントの種類とターゲットを取得すれば場合分けは出来るかと思います。

$(document).on('click submit', selector, function(e) {
  if (e.type === 'click' && e.target === $('a').get(0)) {
    // a click
  } else if (e.type === 'submit' && e.target === $('form').get(0)) {
    // form submit
  }
});
naga3
  • 655
  • 4
  • 10
  • イベントの発動自体は避けられないので、発動後に処理を分ける、ということですね。 やはりその方法しかないのでしょうか・・・? – kijtra Mar 26 '15 at 08:14
1

.onのcallbackの中でthis.nodeNameを見て何をするか決めればいいのではないでしょうか。

sken2
  • 882
  • 5
  • 6