jqueryの複数の名前空間付きイベントへのバインドを解除する

Question

jqueryを使用して複数の名前空間付きカスタムイベントを一度にバインド解除することは可能ですか？

例：カスタムイベント -

resize.table-100 
resize.table-101 
resize.table-300 

は、私が試した -

$(window).unbind("resize.") 

それは、スタックリミットがエラーを超えていますが

EDIT：

以下は動作するようですが、より厳密なイベント命名POSがあるかテーブルを含む上のような名前を持っているそれらのサイズ変更イベントにのみ影響を与えるように？

$(window).off("resize") 

Answer 1

あなたが行うことができ、指定した名前空間でのみリサイズイベントを削除するには：

$(window).off("resize.table-100 resize.table-101 resize.table-300"); 

.off(events [, selector ] [, handler ])：

イベント 型：String つ以上のスペースで区切られたイベントタイプと「click」、「keydown.myPlugin」、「.myPlugin」などの名前空間だけでなく、オプションの名前空間を使用することもできます。ウィンドウ要素からすべてのサイズを変更するイベントを除去するために

$(window).OffRegexNameSpaces("resize", /^table-\d{3}/); 

：あなたのような何かを書くことができるように、私は機能とjQueryの拡張スニペットで

UPDATE

"table-"で始まり3桁で終わる名前空間を持つ。 この書き込みに避けるために：

$(window).off("resize.table-100 resize.table-101 resize.table-300"); 

スニペット：

// 
 
// OffRegexNameSpaces: 
 
// parameters: event --> single event 
 
// regexNamespace --> a regex pattern for namespaces 
 
// 
 
$.fn.OffRegexNameSpaces = function (event, regexNamespace) { 
 
    if (typeof event !== 'string' && namespaces instanceof RegExp) { 
 
    return this; 
 
    } 
 
    return this.each(function (index, element) { 
 
    var elemData = $._data(this); 
 
    var resultNamespaces = $.map(elemData.events[event], function (eventObj, index) { 
 
     if (regexNamespace.test(eventObj.namespace)) { 
 
     return event + '.' + eventObj.namespace; 
 
     } 
 
    }.bind(element)); 
 
    if (resultNamespaces.length > 0) { 
 
     $(this).off(resultNamespaces.join(' ')); 
 
    } 
 
    }); 
 
}; 
 

 

 
$(window).on('resize resize.table-100 resize.table-101 resize.table-300', function(e) { 
 
    alert(e.type + ((e.namespace === undefined || e.namespace.length == 0) ? '' : '.' + e.namespace)); 
 
}); 
 

 
$(function() { 
 
    $('#btn1').on('click', function(e) { 
 
    $(window).trigger('resize.table-100'); 
 
    }) 
 
    $('#btn2').on('click', function(e) { 
 
    $(window).trigger('resize.table-101'); 
 
    }) 
 
    $('#btn3').on('click', function(e) { 
 
    $(window).trigger('resize.table-300'); 
 
    }) 
 
    $('#btn4').on('click', function(e) { 
 
    $(window).trigger('resize'); 
 
    }) 
 

 
    $('#btnUnbind').on('click', function(e) { 
 
    $(window).off("resize.table-100 resize.table-101 resize.table-300"); 
 
    }) 
 

 
    $('#btnUnbindAll').on('click', function(e) { 
 
    $(window).OffRegexNameSpaces("resize", /^table-\d{3}/); 
 
    }) 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<button id="btnUnbind">UnBind all resize events with namespaces</button> 
 
<button id="btnUnbindAll">UnBind all resize events</button> 
 
<button id="btn1">Trigger resize.table-100</button> 
 
<button id="btn2">Trigger resize.table-101</button> 
 
<button id="btn3">Trigger resize.table-300</button> 
 
<button id="btn4">Trigger resize</button>