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

Question

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

3

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

- Agalar Togrul

共享HTML标记 - guradio

闭合标签存在但此处未显示。我不知道正确的StackOverflow指南。 - Agalar Togrul

在我的项目中，<ul>和其子元素在页面加载时创建。它会弹出“未定义”的警告。 - Agalar Togrul

准备好了吗？把翻译后的文本放在 document.ready() 函数里。 - guradio

尝试了两种方法，但仍然弹出“未定义”警告 :( - Agalar Togrul

显示剩余2条评论

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chirag Babaria · 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)
});

- kanpinar · 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="2" data-page="2"

- Chirag Babaria · 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();
});