I'm creating pagination element with Simple Pagination Plugin. I want to get the parent of clicked pagination button.But when click event fires jquery can't get find parent of this element.Here's my code.I hope anyone can help.Thank you.
$(document).on('click','.page-link',function (e) {
e.preventDefault();
var href = $(this).attr('href');
var page = href.split('-');
var catalog = $(this).closest('div.page-changer').attr('data-catalog');
alert(catalog)
});
Here's HTML markup.
<div class="page-changer col-md-12 col-sm-12 col-xs-12" data-catalog="2">
<div class=" col-md-8 paginate0 light-theme simple-pagination" >
<ul>
<li class="disabled">
<span class="current prev">
<span class="fa fa-chevron-left"></span></span>
</li>
<li class="active">
<span class="current">1</span>
</li>
<li>
<a href="#page-2" class="page-link">2</a>
</li>
<li>
<a href="#page-2" class="page-link next">
<span class="fa fa-chevron-right"></span>
</a>
</li>
</ul>
Use below syntax instead of your to bind event on dynamically generated elements in dom
$( "body" ).on( "click", ".page-link", function() {
e.preventDefault();
var href = $(this).attr('href');
var page = href.split('-');
var catalog = $(this).closest('div.page-changer').attr('data-catalog');
alert(catalog)
});
Sometimes doing things dynamic can be headache... so it seems putting
data-catalogid ="2" data-page="2"
like usage may be another approach. Globally binding is good for dynamic DOM manipulation. I mean
.change() vs .on
in this binding function work with elements data attributes may be less confusing.
<div class="page-changer col-md-12 col-sm-12 col-xs-12" data-catalog="2">
<div class="col-md-8 paginate0 light-theme simple-pagination">
<ul>
<li>
<a data-catalog="2" data-page="2" href="#page-2" class="page-link next"> <span class="fa fa-chevron-right"></span></a>
</li>
</ul>
</div>
</div>
<script>
$(document).on('click', 'a[data-page]', function () {
console.log(" From Clicked Link" + " Catalog:" + $(this).data("catalog") + " Page:" + $(this).data("page"));
console.log("From Page Changer (Parent) -> " + $(this).closest('.page-changer').data("catalog"));
});
</script>
You can add these to all links, data-catalog="2" data-page="2"
All are perfect in your code just move e.preventDefault(); at bottom in your function
$( "body" ).on( "click", ".page-link", function() {
var href = $(this).attr('href');
var page = href.split('-');
var catalog = $(this).closest('div.page-changer').attr('data-catalog');
alert(catalog)
e.preventDefault();
});