js获取 和 ajax发送的问题

<div class="row">
                    <div class="col-xs-12 e-search-item">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <a href="#" target="blank" data-id="2">项目A</a>
                                <div 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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

回复
阅读 2.5k
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,最后就可以用你自己喜欢的方式发出请求了。

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

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

javascriptele.addEventListener('click',function(e){
   console.log(e.target);
   // 目标元素的判断需要自己多做一些处理
   if(e.target.className==='test'){
      //then do something
   }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏