如何抓住用jQuery的元素沒有辦法通過類，ID來引用它，等

Question

我有一個表像這樣：

<table> 
<thead> 
    <tr> 
     <th>Hostname</th> 
     <th>Action</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>127.0.0.1</td> 
     <td><a name="delete" onclick="remove_host('127.0.0.1')">Remove</a></td> 
    </tr> 
    <tr> 
     <td>127.0.0.2</td> 
     <td><a name="delete" onclick="remove_host('127.0.0.2')">Remove</a></td> 
    </tr> 
    <tr> 
     <td>127.0.0.3</td> 
     <td><a name="delete" onclick="remove_host('127.0.0.3')">Remove</a></td> 
    </tr> 
</tbody> 

我想要做的是，當用戶點擊刪除，鏈接被替換爲其中一個加載圖像，以便用戶不能重複點擊鏈接。

如何獲得a元素，所以我可以用jQuery設置HTML？

在網站的其他部分，我可以附加rel="host-1"（或類似）的鏈接，所以我可以很容易地引用它來改變HTML。

Answer 1

$('a[name="delete"]').click(function() { 

}); 

編輯

不要使用內聯JS。寫下面更清潔。

$('a[name="delete"]').click(function() { 
    var thehost = $(this).parent().prev().html(); 
    remove_host(thehost); 
}); 

Answer 2

你可以在呼叫傳遞this到remove_host，像這樣：

remove_host('127.0.0.1', this); 

這會給你的DOM元素，你可以在jQuery的包裹的參考。

Answer 3

您可以使用屬性選擇器選擇基於的<a/>

同樣的名字，你可以使用one()所以只處理程序觸發一次。

$("a[name='delete']").one("click", function(){ 
    $(this).html("Doing something...") 
}); 

Example on jsfiddle

側面說明，只是.html()更換不會刪除內聯JS，你可以使用.replaceWith()徹底刪除<a/>

$("a[name='delete']").one("click", function() { 
    $(this).replaceWith($("<img/>").attr({src: "http://placekitten.com/g/50/50"})) 
}); 

Example on jsfiddle

Answer 4

我不確定您是否可以更改標記，但這裏有一個選項。

<tr> 
    <td>120.0.0.2</td> 
    <td><a name="delete" data-ip="120.0.0.2">Remove</a></td> 
</tr> 

$("a[name=delete]").one("click", function(e) { 
    e.preventDefault(); 
    $("<span>Loading</span>").insertBefore(this); 
    var ip = $(this).hide().data("ip"); 
    remove_host(ip); 
}); 

Answer 5

使用jQuery

如果...

<script type=text/javascript> 
$("document").ready(function(){ 
    $("a[name=delete]").click(function(){ 
     $(this).hide().after('<img src="loading.png" />'); 
    }); 
}); 
</script>