无法检索数据属性值

Question

我正在尝试获取 data-* 属性的值以使用引导程序进行删除确认。问题是我无法获取data-userid 的值。

HTML 代码

<a href="#" 
   class="delete" 
   data-userid="{{ $adm->operator_id }}" 
   style="color:red;" 
   id="deleteuseradmin"  
   data-toggle="modal" 
   data-target="#deleteuseradmin"><i class="fas fa-times"></i></a>

Javascript 代码

<script>
$('#deleteuseradmin').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var userid = button.data('userid')
    // var user_id = '2'
    var modal = $(this)
    console.log(button);

    modal.find('.modal-body #userid').val(userid);
});
</script>

当我控制按钮时，结果是

管理员视图：488 初始化 proto: Object(0) DataTable: ƒ (t) add: ƒ (e,t) addBack: ƒ (e) addClass: ƒ (e) 词缀: ƒ (c) after: ƒ () ajaxComplete: ƒ (e) ajaxError: ƒ (e) ajaxSend: ƒ (e) ajaxStart: ƒ (e) ajaxStop: ƒ (e) ajaxSuccess: ƒ (e) alert: ƒ (b) andSelf: ƒ (e) animate: ƒ (e,t,n,r) append: ƒ () appendTo: ƒ (e) attr: ƒ (e,t) bdatepicker: ƒ (t) before: ƒ () 绑定：ƒ (e,t,n) 模糊：ƒ (e,n) 按钮：ƒ (c) 轮播：ƒ (c) 更改：ƒ (e,n) 孩子：ƒ (n,r) 清除队列：ƒ (e) 点击：ƒ (e,n) 克隆： ƒ (e,t) 最接近： ƒ (e,t) 折叠： ƒ (c) 组合： ƒ (n) 构造函数：ƒ (e,n) 内容：ƒ (n,r) 上下文菜单：ƒ (e,n) css：ƒ (e,t) 数据：ƒ (e,t) dataTable: ƒ (t) dataTableExt: {buttons: {…}, 类：{...}，构建：“bs4/dt-1.10.18”，errMode：“alert”，功能： Array(0), …} dataTableSettings: [{…}] datepicker: ƒ (t) dblclick: ƒ (e,n) 延迟：ƒ (e,t) 委托：ƒ (e,t,n,r) 出队：ƒ (e) 分离：ƒ (e) domManip: ƒ (e,t,n) 下拉菜单: ƒ (b) 每个: ƒ (e,t) 可编辑: ƒ (n) 可编辑容器：ƒ (r) 可编辑形式：ƒ (n) 可编辑类型： {抽象输入：ƒ，列表：ƒ，文本：ƒ，文本区域：ƒ，选择：ƒ，...} editableutils: {inherit: ƒ, setCursorPosition: ƒ, tryParseJson: ƒ, sliceObj: ƒ, getConfigData: ƒ, …} 空: ƒ () end: ƒ () eq: ƒ (e) 错误： ƒ (e,n) 扩展： ƒ () 淡入： ƒ (e,n,r) 淡出： ƒ (e,n,r) fadeTo: ƒ (e,t,n,r) fadeToggle: ƒ (e,n,r) 过滤器: ƒ (e) 查找: ƒ (e) 完成： ƒ (e) 第一： ƒ () 聚焦： ƒ (e,n) 聚焦： ƒ (e,n) 聚焦： ƒ (e,n) 得到：ƒ (e) 有：ƒ (e) hasClass：ƒ (e) 高度：ƒ (r,i) 隐藏：ƒ (e,r,i) 悬停: ƒ (e,t) html: ƒ (e) 索引: ƒ (e) 初始化: ƒ (e,t,n) innerHeight: ƒ (r,i) innerWidth: ƒ (r,i) insertAfter: ƒ (e) insertBefore: ƒ (e) is: ƒ (e) jquery: "2.0.3" keydown: ƒ (e,n) 按键：ƒ (e,n) 按键：ƒ (e,n) 最后：ƒ () 长度：0 加载：ƒ (e,t,n) map: ƒ (e) modal: ƒ (c) mousedown: ƒ (e,n) mouseenter: ƒ (e,n) mouseleave: ƒ (e,n) mousemove: ƒ (e,n) mouseout: ƒ (e,n) mouseover: ƒ (e,n) mouseup: ƒ (e,n) next: ƒ (n,r) nextAll: ƒ (n,r) nextUntil: ƒ (n,r) not: ƒ (e) off: ƒ (e,t,n) offset: ƒ (e) offsetParent: ƒ () on: ƒ (e,t,n,r,i) 一：ƒ (e,t,n,r) 外部高度：ƒ (r,i) 外部宽度：ƒ (r,i) 父母： ƒ (n,r) 父母： ƒ (n,r) 父母直到： ƒ (n,r) 弹出框： ƒ (c) 位置： ƒ () prepend: ƒ () prependTo: ƒ (e) prev: ƒ (n,r) prevAll: ƒ (n,r) prevUntil: ƒ (n,r) promise: ƒ (e,t) prop: ƒ (e,t) push: ƒ push() pushStack: ƒ (e) 队列: ƒ (e,t) 就绪: ƒ (e) 删除: ƒ (e,t) removeAttr: ƒ (e) removeClass: ƒ (e) removeData: ƒ (e) removeProp: ƒ (e) replaceAll: ƒ (e) replaceWith: ƒ () 调整大小: ƒ (e,n) 滚动: ƒ (e,n) scrollLeft: ƒ (i) scrollTop: ƒ (i) scrollspy: ƒ (c) 选择: ƒ (e,n) 选择器: "" 序列化: ƒ () serializeArray: ƒ () 显示: ƒ (e,r,i) 兄弟姐妹：ƒ (n,r) 大小：ƒ () 切片：ƒ () 向下滑动：ƒ (e,n,r) slideToggle: ƒ (e,n,r) slideUp: ƒ (e,n,r) 排序: ƒ sort() 拼接: ƒ splice() 停止： ƒ (e,t,n) 提交： ƒ (e,n) 选项卡： ƒ (c) 文本： ƒ (e) toArray: ƒ () 切换: ƒ (e,r,i) toggleClass: ƒ (e,t) 工具提示: ƒ (c) 触发器：ƒ (e,t) triggerHandler: ƒ (e,t) 预输入：ƒ (c) 取消绑定：ƒ (e,t) 取消委托: ƒ (e,t,n) 卸载: ƒ (e,n) 展开: ƒ () val: ƒ (e) 宽度：ƒ (r,i) 换行：ƒ (e) wrapAll：ƒ (e) wrapInner：ƒ (e) 原型：对象

来自https://www.youtube.com/watch?v=DAitIOhxOOA的引用

Answer 1

在刀片文件中：

<a href="javascript:void(0);" 
   class="delete _delete_data" 
   data-userid="{{ $adm->operator_id }}" 
   style="color:red;" 
   <i class="fas fa-times"></i>
</a>

在js代码中

<script>
    $(document).on('click', '._delete_data', function(){
         var user_id = $(this).attr('data-userid');

         console.log('user_id::', user_id); //your data attribute value

         //now open your modal
         $('#deleteuseradmin"').modal('show');
    });
</script>

Answer 2

问题在于您对show.bs.modal 事件的使用。您将它绑定到您的删除按钮#deleteuseradmin，它应该绑定到模态窗口本身。

您需要确保您的删除按钮和删除模式具有不同 id 属性。

按钮 HTML

<a href="#" 
   class="delete" 
   data-userid="{{ $adm->operator_id }}"
   id="deleteButton"
   data-toggle="modal" 
   data-target="#deleteModal"><i class="fas fa-times"></i></a>

注意data-target属性设置为模态窗口deleteModal的id。

模态 HTML

<div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 ...
</div>

注意id 属性设置为deleteModal。

Javascript

<script>
$('#deleteModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var userid = button.data('userid')

    var modal = $(this)
    console.log(button);
});
</script>

请注意，我们将show.bs.modal 事件绑定到模式窗口deleteModal 的id，而不是按钮的id。