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

【问题标题】：jQuery can't get elements parent which is created dynamicallyjQuery 无法获取动态创建的父元素
【发布时间】：2017-08-04 10:39:28
【问题描述】：

我正在使用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>

【问题讨论】：

分享html标记
它应该可以工作。添加结束标签 div 并重试
结束标签存在但未在此处显示。我现在不正确 StackOverflow 指南。
它正在工作，我只是将您的代码复制并粘贴到 jsfiddle 中 :) 请检查：jsfiddle.net/QMaster/8u22zo2q
在我的项目中

标签： javascript jquery pagination

【解决方案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)
});

【讨论】：

使用文档和正文有什么区别？
您能否给出您现在获得父 div 的结构。 dom元素结构
我在上面分享了 HTML 标记。$('body') 对我不起作用。谢谢您的回答。
请查看我的最新答案，它适用于我jsfiddle.net/xdouLdu2

【解决方案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="2" data-page="2"

【讨论】：

我真的很挣扎:)。
锚点父div.click事件的数据目录属性正确触发，但为什么找不到父div。
已编辑答案... ;)
感谢您的回答，但我为这种情况更改了大小写:)。问题不在于选择器。我保存了这个解决方案以备将来使用:)

【解决方案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();
});

【讨论】：

仍然提示“未定义”。可能这个问题与插件有关。还有点击事件触发。