Estoy creando un elemento de paginación con el complemento de paginación simple . Quiero obtener el padre del botón de paginación en el que se hizo clic. Pero cuando se activa el evento de clic, jquery no puede encontrar el padre de este elemento. Aquí está mi código. Espero que alguien pueda ayudar. Gracias.
$(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) });Aquí está el marcado HTML.
<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 la siguiente sintaxis en lugar de su evento para vincular en elementos generados dinámicamente en 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) });A veces, hacer las cosas de forma dinámica puede ser un dolor de cabeza... por lo que parece poner
data-catalogid ="2" data-page="2"como el uso puede ser otro enfoque. El enlace global es bueno para la manipulación dinámica de DOM. quiero decir
.change() vs .onen esta función de vinculación, el trabajo con atributos de datos de elementos puede ser menos confuso.
<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>Puede agregarlos a todos los enlaces, data-catalog="2" data-page="2"
Todos son perfectos en su código, simplemente mueva e.preventDefault(); en la parte inferior de su función
$( "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(); });