3

Estou a fazer uma dashboard com utilizadores e preciso de um botão editar. Quando o botão editar é executado ele apenas faz aparecer e desaparecer código, mas queria saber se é possível executar código jQuery e seleccionar o id do botão.

inserir a descrição da imagem aqui

<a id="1" class="edit">E</a>
<a id="2" class="edit">E</a>
<a id="3" class="edit">E</a>

$('.edit').on('click',function(){
    var id = $('.edit').id;
    alert(id);
});
2
  • Esse html está mal formatado <a id="1"edit"> ... o edit é uma classe?
    – Sergio
    7/10/2016 às 10:40
  • 1
    @Sergio peço desculpa sim é uma class="edit" e no jquery falta o '.edit' 7/10/2016 às 10:43

3 Respostas 3

2

O teu html <a id="1"edit">E</a> está mal formatado, mas partindo do principio que o teu seletor funciona, dentro da callback do jQuery podes usar this.id para saber o ID do elemento que originou o evento.

$('a.edit').on('click',function(){
    var id = this.id;
    alert(id);
});
1
  • 1
    Funcionou, obrigado. :D 7/10/2016 às 10:48
0

Terás que adicionar uma class às tuas anchor tags, assim:

<div class="wrapper">
    <a id="1" class="edit">E</a>
    <a id="2" class="edit">E</a>
    <a id="2" class="edit">E</a>
</div>

$('.edit').on('click', 'body', function (evt) {
    var thisElement = $(this); // isto é o A que foi clicado
    var id = thisElement.attr('id'); // .attr() retira o atributo que lhe passas
});

ps: Está ali 'body' para event delegation porque cheira-me que estás a adicionar elementos dinamicamente. Se isso é verdade, podes:

  • a) Agarrar o evento on-click enquanto estás a fazer o .append() do html
  • b) Fazer event delegation, que é como quem diz: "fazer o hook a um evento que esteja sempre no html enquanto o target é dinamico"
1
0

O atributo ID assim como classes, não deve ser iniciado por números, e como aparentemente você precisa do numero ID para selecionar o registro no BD, recomendo que utilize o atributo data-id assim:

$('.edit').on('click',function(){
    alert($(this).data('id'));
});
.edit {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  border: 1px solid gray;
  background: PaleGreen;
  border-radius: 5px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-id="1" class="edit">E</a>
<a data-id="2" class="edit">E</a>
<a data-id="3" class="edit">E</a>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .