javascript - js获取和 ajax发送的问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - js获取和 ajax发送的问题

巴扎黑 2017-04-10 14:55:17

[JavaScript讨论组]

633

<p class="row">
                    <p class="col-xs-12 e-search-item">
                        <p class="panel panel-default">
                            <p class="panel-heading">
                                <a href="#" target="blank" data-id="2">项目A</a>
                                <p class="e-right-edit">
                                    <button class="btn btn-primary">下载</button>
                                    <button class="btn btn-warning">修改</button>
                                    <button class="btn btn-danger">删除</button>
                                    <span class="label label-primary e-check-status">状态:审核通过</span>
                                </p>
                            </p>
                        </p>
                    </p>
                </p>

问题：如果我想要点击修改或者删除按钮的时候，怎么确定是在这个p上点击的？或者怎么获取a标签上的data-id 的数据？

巴扎黑

全部回复(3)

PHP中文网2017-04-10 14:57:17 3楼

最好是用委托机制。

第一种方法：
$('#table').on('click', 'btn-danger', function(event){});
这里的event.currentTarget对应的就是删除所在的button。此时$(event.currentTarget).parent().prev()就可以获得对应的a标签。
这需要为三种按钮各绑一次，一共三次。

第二种方法：
$('#table').on('click', 'btn', function(event){});
获取a标签的方法同上，不过此时只需要一次绑定就可以同时捕获三种按钮,所以需要根据currentTarget的class来区分到底是按的哪一个按钮。

纯js方法「改自第二种」：
document.getElementById('table').onclick=function(event){}
其中event.target就是鼠标所点击的控件，要注意的是，该控件可能为三个按钮之一也可能是其他无关的标签，需要进行判断。通过target判断当前点击节点后，再根据event.target.parentNode.previousElementSibling获得id所在节点，取得data-id，最后就可以用你自己喜欢的方式发出请求了。

赞 +0

添加回复

迷茫2017-04-10 14:57:17 2楼

jquery吧
$(this).parent('.e-right-edit').siblings('a[data-id]').attr('data-id')

赞 +0

添加回复

ringa_lee2017-04-10 14:57:17 1楼

纯js实现的话，可以这么判断，我给你个示例：

javascriptele.addEventListener('click',function(e){
   console.log(e.target);
   // 目标元素的判断需要自己多做一些处理
   if(e.target.className==='test'){
      //then do something
   }
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>