can't get value from a pressed - php

Question

Hi' I'm trying to get value with jquery with no success.
This part of the code I get with ajax and it's changes (it's part of a loop in function.php)
if ($termschildren) {
echo '<ul class="BlaBla">';
foreach ( $termschildren as $termchildren ) {
echo '<li class="BlaBlaLi">';
echo '' . $c_term_name->name . '';
echo '</li>';
echo '</ul>';
} else {
echo ' ';
}
die();
the ajax is return to a div called 'childrens_world'
echo '<div class="childrens_world">';
echo ' '; //for start
echo '</div>';
this is the jquery I use. I can't get the data-filter value. (the loop is fine, in the source code i see it well)
$filterLinksChildren = $('.tax-filter-children');
$('.childrens_world').on("click", $filterLinksChildren, function(e) {
var filt = $filterLinksChildren.data('filter');
//do something;
)};
I use the data-filter (var filt) to send to isotope jquery function
Thanks for any help

Answer 1

A couple of minor fixes:
Make the following as a string variable as opposed to a jQuery selector.
From:
$filterLinksChildren = $('.tax-filter-children');
To
filterLinksChildren = '.tax-filter-children';
There's apparently a small typographical error towards the end of the function:
)}; should actually be });
So, your complete solution would be something like the following:
filterLinksChildren = ".tax-filter-children";
$('.childrens_world').on("click", filterLinksChildren, function(e) {
alert($(this).data("filter"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="childrens_world">
<ul class="BlaBla">
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="a1">a1
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="a2">a2
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="a3">a3
</a>
</li>
</ul>
</div>
<hr>
<div class="childrens_world">
<ul class="BlaBla">
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="b1">b1
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="b2">b2
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="b3">b3
</a>
</li>
</ul>
</div>

Answer 2

You can try an alternate to get data value. Use attr
var filt = $filterLinksChildren.attr('data-filter');