0

I have an icon within a bootstrap popover that I would like to click on and then access the text within the popover (Example: title or content - presumably accessed by class) but can't seem to get it working.

//HTML
<a class="popover-markup" data-toggle="popover" data-placement="bottom" href="#" style="text-align:center;" data-title="title <i class='material-icons ear' >hearing</i>" data-content="content"> 毎日 </a>

//script
$(function () {
   $('[data-toggle="popover"]').popover({html: true})
})

$(document).ready(function() {  
   $(".ear").click( function() {
     console.log("ear clicked");
     var text = $(this).text(); 
   });
});

I tried an onclick='tts(this)' within the element which got if firing but then couldn't access 'this', but this didn't seem like way to go anyway.

Thanks

UPDATE Following the advice regarding event delegation I tried this but still not working?

$( "a" ).on( "click", ".ear", function( event ) {
    console.log( $( this ).text() );
});
quietplace
  • 471
  • 1
  • 4
  • 14
  • 1
    Try something like `$('body').on('click', '.ear', function(){....}))` You should also replace `body` with an element closer to `ear` (but still a parent) EDIT: Sorry. Misread the question. I didn't notice that you got the click-handler working. – smoksnes Jan 24 '20 at 06:57
  • 1
    event delegation https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation – Pranav C Balan Jan 24 '20 at 06:58
  • Ok got it working with $('body') but $( this ).text() returns the text "hearing" which is the text in the icon element. how can I access the text in data-title or data-content?? Thanks – quietplace Jan 24 '20 at 09:16
  • Use browser development tools to find what the plugin has rendered - F12, select element (or right-click inspect element) then look at ancestors to find what class they have – freedomn-m Jan 24 '20 at 09:29
  • Ok I am able to access parent and child elements using .prev() & .next() eg. `console.log($( this ).prev().text())` Thanks – quietplace Jan 24 '20 at 09:45
  • Reworded previous comment: There isn't any `data-title` or `data-content` - there is `.popover-title` (and `.popover-content`) - so if you mean these, then you can get them via DOM traversal/navigation - you already have the `i` as `this`, giving `$(this).closest(".popover").find(".popover-content").html())` – freedomn-m Jan 24 '20 at 09:51
  • Your question seems to be evolving: click -> event delegation then text() -> traversal. Please ask a single, clear (concise) question that can be answered. – freedomn-m Jan 24 '20 at 09:53
  • Apologies if question was unclear, but my original question concerned a click event to access text. I didn't realise event delegation and traversing where involved at that point - but that was what was needed to answer the original question. – quietplace Jan 25 '20 at 01:47

1 Answers1

1

To finalise this question this is the code that worked for me. Thanks

$( "body" ).on( "click", ".ear", function( event ) {
    console.log($( this ).prev().text())
});
quietplace
  • 471
  • 1
  • 4
  • 14