jQuery + Rails: Comment obtenir ID utilisateur du bouton cliqué

Question

J'ai passé des heures à essayer de résoudre ce problème et d'examiner d'autres questions StackOverflow similaires (1)(2), mais aucun ne semble avoir une réponse à mon problème ..

I Impossible de passer cette erreur: ReferenceError: id is not defined. L'alerte ne s'affiche pas aussi.

$("button.btn-tag-cat").click(function(e){ 
    e.preventDefault(); 
    var id = $(this).prop('id'); 
    alert(id); 
    id.find('span').show(); 
    }, function(){ 
    id.find('span').hide(); 
    }); 

J'ai essayé les manières suivantes d'utiliser la variable id mais aucune ne fonctionne.

$(id).find('span').show(); 
$("#" + id).find('span').show(); 

Cependant, quand je retire le morceau de code ci-dessous l'alerte, l'alerte apparaît avec l'ID correct appartenant au bouton.

$("button.btn-tag-cat").click(function(e){ 
    e.preventDefault(); 
    var id = $(this).prop('id'); 
    alert(id); 
    }); 

Vue partielle: id bouton fait référence à une variable locale rubisid="<%= name %>"

<% q.categories_name_in.each do |name| %> 
    <button type="button" class="btn btn-outline-primary btn-lg btn-tag-cat" id="<%= name %>"><%= name %><span class='glyphicon glyphicon-remove'></span></button> 
    <% end %> 

Answer 1

Comme vous l'avez noté, l'erreur est chaînage fonctions dans l'écouteur de clic.

Afin d'obtenir l'attribut id, vous pouvez utiliser la fonction jQuery attr, comme:

$("button.btn-tag-cat").click(function(e) { 
    e.preventDefault(); 
    var id = $(this).attr('id'); 
    alert(id); 
    $('#' + id).find('span').show(); 
}); 

$("button.btn-tag-cat").click(function(e) { 
 
    e.preventDefault(); 
 
    var id = $(this).attr('id'); 
 
    alert(id); 
 
    $('#' + id).find('span').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="btn-tag-cat" id="hallo">Press</button>

Answer 2

Ici, dans votre code, j'embellira pour voir votre erreur:

$("button.btn-tag-cat").click(
    function(e) { 
    e.preventDefault(); 
    var id = $(this).prop('id'); 
    alert(id); 
    id.find('span').show(); 
    }, 

    function() { 
    id.find('span').hide(); 
    } 
); 

pas glace la seconde fonction a

function() { 
    id.find('span').hide(); // right here 
    } 

mais l'ID est pas encore défini

essayer

function() { 
    var id = $(this).prop('id'); // this first 
    id.find('span').hide(); 
    }