第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

動(dòng)態(tài)創(chuàng)建元素的事件綁定？

動(dòng)態(tài)創(chuàng)建元素的事件綁定？

青春有我 2019-05-20 15:04:24
我有一些代碼，我循環(huán)遍歷頁(yè)面上的所有選擇框，并將.hover事件綁定到它們，以便在它們的寬度上做一些麻煩mouse on/off。這發(fā)生在頁(yè)面準(zhǔn)備就緒并且工作得很好。我遇到的問(wèn)題是，我在初始循環(huán)后通過(guò)Ajax或DOM添加的任何選擇框都不會(huì)受到事件限制。我找到了這個(gè)插件（jQuery Live Query Plugin），但在我用插件添加另外5k到我的頁(yè)面之前，我想知道是否有人知道這樣做的方法，無(wú)論是直接使用jQuery還是通過(guò)其他選項(xiàng)。
查看完整描述

11 回答

?
子衿沉夜

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

從jQuery 1.7開(kāi)始，你應(yīng)該使用jQuery.fn.on：

$(staticAncestors).on(eventName, dynamicChild, function() {});

在此之前，推薦的方法是使用live()：

$(selector).live( eventName, function(){} );

但是，live()在1.7中贊成使用on()，并在1.9中完全刪除。該live()簽名：

$(selector).live( eventName, function(){} );

...可以用以下on()簽名替換：

$(document).on( eventName, selector, function(){} );

例如，如果您的頁(yè)面是動(dòng)態(tài)創(chuàng)建具有類名的元素，dosomething您可以將事件綁定到已存在的父項(xiàng)（這是問(wèn)題的核心，您需要存在要綁定的內(nèi)容，不要綁定到動(dòng)態(tài)內(nèi)容），這可能是（也是最簡(jiǎn)單的選擇）document。雖然記住document可能不是最有效的選擇。

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'});

綁定事件時(shí)存在的任何父級(jí)都可以。例如

$('.buttons').on('click', 'button', function(){
    // do something here});

適用于

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here --></div>


查看完整回答
反對(duì) 回復(fù) 2019-05-20
?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

這是一個(gè)沒(méi)有任何庫(kù)或插件的純JavaScript解決方案：

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }}, false);

這里hasClass是

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;}

Live demo

歸功于Dave和Sime Vidas

使用更現(xiàn)代的JS，hasClass可以實(shí)現(xiàn)為：

function hasClass(elem, className) {
    return elem.classList.contains(className);}


查看完整回答
反對(duì) 回復(fù) 2019-05-20
?
浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以在創(chuàng)建對(duì)象時(shí)向?qū)ο筇砑邮录Ｈ绻诓煌瑫r(shí)間向多個(gè)對(duì)象添加相同的事件，則可能需要?jiǎng)?chuàng)建命名函數(shù)。

var mouseOverHandler = function() {
    // Do stuff};var mouseOutHandler = function () {
    // Do stuff};$(function() {
    // On the document load, apply to existing elements
    $('select').hover(mouseOverHandler, mouseOutHandler);});
    // This next part would be in the callback from your Ajax call$("<select></select>")
    .append( /* Your <option>s */ )
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo( /* Wherever you need the select box */ );


查看完整回答
反對(duì) 回復(fù) 2019-05-20
?
繁華開(kāi)滿天機(jī)

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以簡(jiǎn)單地將事件綁定調(diào)用包裝到一個(gè)函數(shù)中，然后調(diào)用它兩次：一次是在文檔準(zhǔn)備就緒，一次是在添加新DOM元素的事件之后。如果這樣做，您將希望避免在現(xiàn)有元素上綁定相同的事件兩次，因此您需要解除現(xiàn)有事件的綁定或（更好）僅綁定到新創(chuàng)建的DOM元素。代碼看起來(lái)像這樣：

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});}$(document).ready(function(){
    addCallbacks($(".myEles"))});// ... add elements ...addCallbacks($(".myNewElements"))


查看完整回答
反對(duì) 回復(fù) 2019-05-20
?
森欄

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊

嘗試使用.live()而不是.bind(); 在執(zhí)行Ajax請(qǐng)求后，.live()它將綁定.hover到您的復(fù)選框。


查看完整回答
反對(duì) 回復(fù) 2019-05-20
?
小怪獸愛(ài)吃肉

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊

我更喜歡使用選擇器并將其應(yīng)用于文檔。

這將綁定在文檔上，并將適用于頁(yè)面加載后將呈現(xiàn)的元素。

例如：

$(document).on("click", $(selector), function() {
    // Your code here});


查看完整回答
反對(duì) 回復(fù) 2019-05-20
?
明月笑刀無(wú)情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

記下放置元素的“MAIN”類，例如

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul></div>

在上面的場(chǎng)景中，jQuery將觀看的MAIN對(duì)象是“容器”。

然后，你將主要有元素的名稱下的容器，如ul，li和select：

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });


查看完整回答
反對(duì) 回復(fù) 2019-05-20
  • 11 回答
  • 0 關(guān)注
  • 1015 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)