suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Delegate- und Undelegate-Instanzen in jQuery

Detaillierte Erläuterung der Delegate- und Undelegate-Instanzen in jQuery

黄舟
黄舟Original
2017-06-26 10:56:221381Durchsuche

Nichts zu sagen, schauen Sie sich einfach den Code an!

jQueryVersion: 1.71

Browserversion: chr ome 21

<body>

    <ul class="a-list">
        <li><a href="javascript:;">test1</a></li>
        <li><a href="javascript:;">test2</a></li>
        <li><a href="javascript:;">test3</a></li>
        <li><a href="javascript:;">test4</a></li>
        <li><a href="javascript:;">test5</a></li>
    </ul>

    <ul class="button-list">
        <li><button>test1</button></li>
        <li><button>test2</button></li>
        <li><button>test3</button></li>
        <li><button>test4</button></li>
        <li><button>test5</button></li>
    </ul>

</body>
1 //绑定
2 $(document).delegate(&#39;a&#39;, &#39;click&#39;, function()
3 {
4     alert($(this).html());
5 });
1 //不能取消
2 $(document).undelegate(&#39;a&#39;);
3 
4 //可以取消
5 $(document).undelegate(&#39;a&#39;, &#39;click&#39;);
1 //绑定
2 $(document).delegate(&#39;a, button&#39;, &#39;click&#39;, function()
3 {
4     alert($(this).html());
5 });
//不能取消
$(document).undelegate(&#39;a&#39;, &#39;click&#39;);

//不能取消
$(document).undelegate(&#39;button&#39;, &#39;click&#39;);

//可以取消
$(document).undelegate(&#39;a, button&#39;, &#39;click&#39;);

Hinweis: 

1 //不能取消 (与绑定时选择器内容不一致，顺序颠倒)
2 $(document).undelegate(&#39;button, a&#39;, &#39;click&#39;);
3 
4 //不能取消 (与绑定时选择器内容不一致，少了一个空格)
5 $(document).undelegate(&#39;a,button&#39;, &#39;click&#39;);
1 //绑定
2 $(document).delegate(&#39;a, button&#39;, &#39;click mouseover&#39;, function(e)
3 {
4     alert($(this).html());
5 });
//略过部分测试，同上

//不能取消
$(document).undelegate(&#39;a&#39;, &#39;mouseover&#39;);

//可以取消
$(document).undelegate(&#39;a, button&#39;, &#39;click&#39;);

//可以取消
$(document).undelegate(&#39;a, button&#39;, &#39;mouseover&#39;);

//可以取消
$(document).undelegate(&#39;a, button&#39;, &#39;mouseover click&#39;);
1 //绑定
2 $(&#39;.a-list&#39;).delegate(&#39;a&#39;, &#39;click mouseover&#39;, function()
3 {
4     alert($(this).html());
5 });
//略过部分测试，同上
    
//不能取消
$(document).undelegate(&#39;a&#39;, &#39;click&#39;);

//可以取消
$(&#39;.a-list&#39;).undelegate(&#39;a&#39;, &#39;click&#39;);

//可以取消
$(&#39;ul&#39;).undelegate(&#39;a&#39;, &#39;click&#39;);

//可以取消
$(&#39;ul&#39;).undelegate();

//可以取消
$(&#39;.a-list&#39;).undelegate();

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Delegate- und Undelegate-Instanzen in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der Funktion jQuery.undelegate()Nächster Artikel：Detaillierte Erläuterung der Verwendung der Funktion jQuery.undelegate()

In Verbindung stehende Artikel

Mehr sehen