无法检索数据属性值

Question

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

<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>

<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 初始化原型： 对象（0） 数据表： ƒ （t） 添加： ƒ （e，t） 添加返回： ƒ （e） 添加类： ƒ （e） 词缀： ƒ （c） 之后： ƒ （） ajax完成： ƒ （e） ajax错误： ƒ （e） ajax发送： ƒ （e） ajax开始： ƒ （e） ajax停止： ƒ （e） ajaxStop： ƒ （e） ajax成功： ƒ （e） alert： ƒ （b） 和自身： ƒ （e） 动画： ƒ （e，t，n，r） 追加： ƒ （） 追加到： ƒ （e） attr： ƒ （e，t） bdatepicker： ƒ （t） 之前： ƒ （） 绑定： ƒ （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） data： ƒ （e，t） dataTable： ƒ （t） dataTableExt： {buttons： {...}， classes： {...}， build： “bs4/dt-1.10.18”， errMode： “alert”， feature： Array（0）， ...} dataTableSettings： [{...}] datepicker： ƒ （t） dblclick： ƒ （e，n） delay： ƒ （e，t） delegate： ƒ （e，t，n，r） dequeue： ƒ （e） detach： ƒ （e） domManip： ƒ （e，t，n） 下拉列表： ƒ （b） 每个： ƒ （e，t） 可编辑： ƒ （n） 可编辑容器： ƒ （r） 可编辑形式： ƒ （n） 可编辑类型： {abstractinput： ƒ， list： ƒ， text： ƒ， textarea： ƒ， select： ƒ， ...} editableutils： {inherit： ƒ， setCursorPosition： ƒ， tryParseJson： ƒ， sliceObj： ƒ， getConfigData： ƒ， ...} 空： ƒ （） 结束： ƒ （） eq： ƒ （e） 错误： ƒ （e，n） 扩展： ƒ （） 淡入： ƒ （e，n，r） 淡出： ƒ （e，n，r） 淡入淡出： ƒ （e，t，n，r） 淡入淡出切换： ƒ （e，n，r） 过滤器： ƒ （e） 查找： ƒ （e） 完成： ƒ （e） 第一： ƒ （） 焦点： ƒ （e，n） 焦点： ƒ （e，n） 焦点输出： ƒ （e，n） 获取： ƒ （e） 有： ƒ （e） 有： ƒ （e） 有类： ƒ （e） 高度： ƒ （r，i） 隐藏： ƒ （e，r，i） 悬停： ƒ （e，t） html： ƒ （e） 索引： ƒ （e） init： ƒ （e，t，n） innerHeight： ƒ （r，i） innerWidth： ƒ （r，i） insertAfter： ƒ （e） insertBefore： ƒ （e） is： ƒ （e） jquery： “2.0.3” Keydown： ƒ （e，n） 按键： ƒ （e，n） keyup： ƒ （e，n） last： ƒ （） 长度： 0 加载： ƒ （e，T，N） 地图： ƒ （e） 模态： ƒ （c） 鼠标向下： ƒ （e，n） 鼠标输入： ƒ （e，n） 鼠标离开： ƒ （e，n） 鼠标移动： ƒ （e，n） 鼠标输出： ƒ （e，n） 鼠标悬停： ƒ （e，n） 鼠标向上： ƒ （e，n） 下一个： ƒ （n，r） 下一个全部： ƒ （n，r） 下一个直到： ƒ （n，r） 不： ƒ （e） 关闭： ƒ （e，t，n） 偏移： ƒ （e） 偏移父级： ƒ （） 上： ƒ （e，t，n，r，i） 一： ƒ （e，t，n，r） 外层高度： ƒ （r，i） 外体宽度： ƒ （r，i） 父项： ƒ （n，r） 父项： ƒ （n，r） 父母直到： ƒ （n，r） 弹出框： ƒ （c） 位置： ƒ （） 前置： ƒ （） 前置： ƒ （e） 上一页： ƒ （n，r） 上一页全部： ƒ （n，r） 上一页直到： ƒ （n，r） promise： ƒ （e，t） prop： ƒ （e，t） push： ƒ push（） pushStack： ƒ （e） queue： ƒ （e，t） ready： ƒ （e） remove： ƒ （e，t） removeAttr： ƒ （e） removeClass： ƒ （e） removeData： ƒ （e） removeProp： ƒ （e） replaceAll： ƒ （e） replaceWith： ƒ （） resize： ƒ （e，n） scroll： ƒ （e，n） scrollLeft： ƒ （i） scrollTop： ƒ （i） scrollTop： ƒ （i） scrollspy： ƒ （c） select： ƒ （e，n） selector： “” serialize： ƒ （） serializeArray： ƒ （） show： ƒ （e，r，i） 兄弟姐妹： ƒ （n，r） 大小： ƒ （） 切片： ƒ （） slideDown： ƒ （e，n，r） slide切换： ƒ （e，n，r） slideUp： ƒ （e，n，r） 排序： ƒ sort（） splice： ƒ splice（） stop： ƒ （e，t，n） submit： ƒ （e，n） 选项卡： ƒ （c） 文本： ƒ （e） toArray： ƒ （） 切换： ƒ （e，r，i） 切换类： ƒ （e，t） 工具提示： ƒ （c） 触发器： ƒ （e，t） 触发器处理程序： ƒ （e，t） typeahead： ƒ （c） unbind： ƒ （e，t） undelegate： ƒ （e，t，n） unload： ƒ （e，n） unwrap： ƒ （e，n） unwrap： ƒ （） val： ƒ （e） width： ƒ （r，i） wrap： ƒ （e） wrapAll： ƒ （e） wrapInner： ƒ （e） proto： Object

参考https://www.youtube.com/watch?v=DAitIOhxOOA

Answer 1

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

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

<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-目标属性设置为模式窗口deleteModal的id。

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

请注意，< code>id属性被设置为< code>deleteModal。

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

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

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

Answer 2

在刀片文件中:

<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>