無法獲取點擊的元素

Question

這是HTML代碼的ID或價值：

<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(); 
}) 

我無法獲得鏈接的ID或價值點擊。我如何獲得點擊元素的ID？請幫忙，謝謝。

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;