無法與jQuery添加的dom對象進行交互追加

我已經使用append將tr和td標記添加到表中，但我似乎並不知道dom對象存在（我認爲這就是append/prepend的作用了嗎？）。當我運行該腳本時，表格行被添加並且用戶可以看到它，但是jQuery不捕獲超鏈接上的單擊處理程序或其他任何東西。我在另一個非常棒的頁面上做了同樣的事情。我也包括這一點。如果有人能夠告訴我我的思路如何脫軌，我會非常感激。此外，如果我以錯誤的方式討論這個問題，請讓我知道，這樣我可以改進。無法與jQuery添加的dom對象進行交互追加

斷碼：

$("#addAdmin").click(function(){ 
       $("#chosenAdmins").append('<tr id = "admin' + $("#admins").val() + '"><td align="left">' + $("#admins option:selected").text() + ' </td><td align="right"><a href="#" class = "removeAdmin" id = "ra" style = "font-size: 10px;">Remove</a></td><tr>'); 
    }); 
    $(".removeAdmin").click(function(e){ 
     e.preventDefault(); 
     alert('clicked'); 
     alert(this.attr(id)); 
    }); 
    <select id = "admins"> 
     <option value = "1">bob smith</option> 
    </select> 
    <input type = "button" id = "addAdmin"/> 
    <table id = "chosenAdmins" align="center" width="0%"> </table>

一個不同的頁面上的工作原理類似的代碼是：

$(document).ready(function() { 
     var leftData = '<div id = "l1">left Stuff</div>'; 
     var leftData = leftData + '<div id = "l2">left Stuff</div>'; 
     var rightData = '<div id = "r1">right Stuff</div>'; 
     var rightData = rightData + '<div id = "r2">right Stuff</div>'; 
     $("#selector").prepend("<div id = 'leftSelect' style = 'float:left'>"+leftData+"</div><div id = 'rightSelect' style = 'float:left'>"+rightData+"</div>"); 
     $("#l1").click(function(){ 
      $(this).hide("fast", function(){ 
       $(this).prependTo('#rightSelect'); 
       $(this).show("fast"); 
      }); 
     }); 
    }); 

<div id = "selector"> </div>

來源

2012-07-03 Travis

請提供***斷碼***合適的片段，你忘了包括''標籤？如果是這樣，你還「忘記」排除了什麼？ – xandercoded

什麼都沒有。 :)這是所有相關的代碼。 – Travis

alert（this.attr（id））;也是一場災難...應該已經警覺（$（this）.attr（「id」））; – Travis

您正在定義您的事件h在頁面上有任何.removeAdmin元素之前，先安裝（$('.removeAdmin').click()）。

你需要做的是委託你的活動。假設你正在使用最新的jQuery：

$("#chosenAdmins").on('click','.removeAdmin',function(e){ 
    e.preventDefault(); 
    alert('clicked'); 
    alert(this.attr(id)); 
});

這樣，事件處理程序連接到存在，即一個元素，在chosenAdmins表。

注意不建議使用.live，因爲這會將事件附加到文檔，而其他代碼可能會不小心刪除這些事件。如果您在使用jQuery < 1.7，使用delegate：

$("#chosenAdmins").delegate('.removeAdmin','click',function(e){ 
    e.preventDefault(); 
    alert('clicked'); 
    alert(this.attr(id)); 
});

來源

2012-07-03 17:14:32 jackwanders

感謝您的快速反應。在代理上使用是否有優勢？我正在使用1.7.2。 – Travis

'on'只是接管'bind'，'delegate'和'live'（本身就是'delegate'的一個版本）的單個函數調用。我認爲對於正常的事件委託並沒有任何實際的區別，但'on'是更新的語法。 'on'還具有易於記憶的'off'功能來移除事件處理程序。 – jackwanders

對於動態創建的元素，你需要的live功能：

$("#elem").live("click", function() { 
    // Code here 
});

使用，點擊，懸停和所有類型的功能。

http://api.jquery.com/live/

來源

2012-07-03 17:12:29

'live'已被棄用... – xandercoded

@Xander好點..仍然使用較老的jQuery。關於時間我會改變我的腳本，然後 –

我已經使用委託之前，並在這樣做，我看到生活被棄用。我很驚訝有多少人仍在使用它。 – Travis

你必須在.append一個錯字（忘了加斜線），修復損壞的HTML，它應該工作：

來源：

...Remove</a></td><tr>')

要：

...Remove</a></td></tr>')

來源

2012-07-03 17:13:31 xandercoded

他是對的。這不是你上面提到的問題的原因，但它是一個問題。 – Grinn

@Grinn當他提供的代碼只是一個片段時，你怎麼知道它不存在？你假設代碼是*不*封裝在一個事件中。他沒有'

使用$(document)選擇器，同時追加dom，live和delegate不推薦。例如：

$(document).on('click','.removeAdmin',function(e){ 
    e.preventDefault(); 
    alert('clicked'); 
    alert(this.attr(id)); 
});

來源

2015-05-27 11:39:45

相關問題

無法與jQuery添加的dom對象進行交互追加

回答

相關問題