Невозможно получить идентификатор или значение щелкнули элемента

Question

Это код HTML:

<div class="ribbon-fav" id="fav_id"> 
      <%- if user_signed_in? %> 
        <%- unless current_user.favorite_texts.exists?(id: text.id) -%> 
          <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite "), :id => 'fav_id_002' %> 
        <%- else -%> 
          <%= link_to image_tag("favd-hrt.png", size: "20x18", alt: "Remove from Favorites", title: " Remove from Favorites "), :id => 'fav_id_001' %> 
        <%- end -%> 
      <%- else -%> 
        <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite "), favorite_texts_path(text_id: text.id), method: :post, :'data-turbolinks-action' => 'replace' %> 
      <%- end -%> 

Ниже Javascript

console.log("favorite_add_remove.js loaded"); 

$(document).ready(function(){ 
    console.log("called function"); 
    $("#fav_id a").on("click", function(e) { 
     e.preventDefault(); 
     //var value = $(this).val(); 
     console.log(e.target.id); 
     //console.log(value); 
    }); 
    //f1(); 
}) 

Я не могу получить идентификатор или значение ссылки щелкнул. Как получить идентификатор элемента clicked? Пожалуйста, помогите, спасибо.

Answer 1

См. Пример скрипки. это может помочь вам

$(document).ready(function(){ 
 
\t $(".test").click(function(){ 
 
    var clickedId = this.id; 
 
    alert(this.id); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="surya1" class="test">asda</a> 
 
<a href="#" id="surya2" class="test">asd</a> 
 
<a href="#" id="surya3" class="test">asdasd</a>

https://jsfiddle.net/hu7r7hsu/

Все, что вам нужно сделать, это установить тот же класс для всех тегов анкерных и после того, как делает его общий следовать примеру ниже кода.

$(".linkClass").on("click", function() { 
    var clickedId = this.id; 
} 

Answer 2

Попробуйте этот код:

$('#fav_id').on('click', 'a', function(){ 
    console.log($(this).attr('id')); 
}); 

Answer 3

Это сделало его работу, пришлось немного измениться в HTML.

<div class="ribbon-fav" id="fav_id"> 
      <%- if user_signed_in? %> 
        <%- unless current_user.favorite_texts.exists?(id: text.id) -%> 
          <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite ", :id => 'fav_id_002') %> 
        <%- else -%> 
          <%= link_to image_tag("favd-hrt.png", size: "20x18", alt: "Remove from Favorites", title: " Remove from Favorites ", :id => 'fav_id_001') %> 
        <%- end -%> 
      <%- else -%> 
        <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite "), favorite_texts_path(text_id: text.id), method: :post, :'data-turbolinks-action' => 'replace' %> 
      <%- end -%> 
     </div> 

Убрана id из тега ссылки и добавить его в img тега.

И Javascript, как показано ниже:

console.log("favorite_add_remove.js loaded"); 

$(document).ready(function(){ 
    console.log("called function"); 
    $("#fav_id a").on("click", function(e) { 
     e.preventDefault(); 
     var imgIdVal = $('img', this).attr('id'); 
     console.log(imgIdVal); 
    }); 
}) 

Это дало выход в fav_id_002;