Question

我正在使用Simple Pagination Plugin创建分页元素。我想获得点击分页按钮的父级。但是当点击事件触发时，jquery无法找到这个元素的父节点。这是我的代码。我希望任何人都可以帮忙。谢谢。

$(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)
  });

这是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>

Answer 1

使用以下语法代替您对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)
});

Answer 2

有时做事情动态可能会让人头疼...... 所以它似乎正在推出

    data-catalogid ="2" data-page="2"

像使用一样可能是另一种方法。全局绑定有利于动态DOM操作。我的意思是

     .change() vs .on

在这个绑定函数中使用元素数据属性可能不那么容易混淆。

    <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>

您可以将这些添加到所有链接，data-catalog =＆＃34; 2＆＃34;数据页=＆＃34; 2＆＃34;

Answer 3

只需移动e.preventDefault（）;在你的功能底部

$( "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();
});

jQuery无法获取动态创建的父元素

3 个答案: