jQuery(document).on('click', '.woocommerce-breadcrumb', function() {
var eventLabel = jQuery(this).children('a').text().trim();
console.log(eventLabel);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class ="woocommerce-breadcrumb">
<a href="#">home</a>
<i class ="fa fa-angle-right"></i>
<a href ="#">music</a>
<i class ="fa fa-angle-right"></i>
"album"
</nav>HomeMusic home>music>album ==> when i click music or home both home and music printing but i want to print only the clicked link
You can always do this:
jQuery(document).on('click', '.woocommerce-breadcrumb a', function() {
var eventLabel = jQuery(this).text().trim();
console.log(eventLabel)
});
I've moved the reference to a into '.woocommerce-breadcrumb' and removed the .find()
Demo
jQuery(document).on('click', '.woocommerce-breadcrumb a', function() {
var eventLabel = jQuery(this).text().trim();
console.log(eventLabel)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="woocommerce-breadcrumb">
<a href="#">home</a>
<i class="fa fa-angle-right"></i>
<a href="#">music</a>
<i class="fa fa-angle-right"></i> "album" </nav>