¿Cómo puedo agarrar un elemento con jQuery sin una manera de hacer referencia a ella a través de la clase, identificación, etc.

Question

Tengo una tabla de este modo:

<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> 

Lo que estoy tratando de hacer es, cuando un usuario hace clic en Eliminar, que el enlace se reemplaza con una de esas imágenes de carga para que el usuario no pueda presionar el enlace repetidamente.

¿Cómo obtengo el elemento a, por así decirlo, entonces puedo configurar el HTML de acuerdo con jQuery?

En otras partes del sitio, puedo adjuntar un rel="host-1" (o similar) al enlace, por lo que puedo hacer referencia fácilmente para cambiar el código HTML.

Answer 1

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

}); 

EDITAR

No utilizar en línea JS. escribir lo siguiente es mucho más limpio.

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

Answer 2

Se podía pasar this en la llamada a remove_host, así:

remove_host('127.0.0.1', this); 

Esto le dará una referencia al elemento DOM, que se puede envolver en jQuery.

Answer 3

Puede utilizar el selector de atributos para seleccionar en base a nombre de la <a/>

Además, se puede utilizar one() por lo que el controlador sólo se activa una vez.

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

Example on jsfiddle

lado nota, sólo la sustitución con .html() no eliminará el js en línea, usted podría utilizar .replaceWith() para eliminar completamente el <a/>

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

Example on jsfiddle

Answer 4

No estoy seguro de si puede cambiar el marcado o no, pero esta es una opción.

<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

si se utiliza jQuery ...

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