Javascript 无法检索数据属性值

我试图获取

data-*

属性的值，以使用引导进行删除确认。问题是我无法获取

数据userid

的值

Html代码

Javascript代码

$（'deleteuseradmin'）。on（'show.bs.modal'，函数（事件）{
var按钮=$（event.relatedTarget）
var userid=button.data（'userid'）
//var user_id='2'
var modal=$（此）
控制台日志（按钮）；
modal.find（'.modal body#userid'）.val（userid）；
});

当我按下控制台按钮时，结果是

管理员视图：488初始化 proto：Object（0）数据表：ƒ（t）add:ƒ（e，t）addBack:ƒ（e）addClass:ƒ（e）affix:ƒ（c）after:ƒ（）ajaxComplete:ƒ（e） ajaxError:ƒ（e）ajaxSend:ƒ（e）ajaxStart:ƒ（e）ajaxStop:ƒ（e） ajaxSuccess:ƒ（e）警报：ƒ（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）数据：ƒ（e，t）数据表：ƒ（t）数据表ext:{按钮：{…}， 类：{…}，内部版本：“bs4/dt-1.10.18”，错误模式：“警报”，功能： 数组（0），…}dataTableSettings:[{…}]日期选择器：ƒ（t）dblclick:ƒ （e，n）延迟：ƒ（e，t）委托：ƒ（e，t，n，r）出列：ƒ（e）分离：ƒ （e） domManip:ƒ（e，t，n）下拉列表：ƒ（b）每个：ƒ（e，t）可编辑：ƒ（n） 可编辑容器：ƒ（r）可编辑形式：ƒ（n）可编辑类型： {abstractinput:ƒ，list:ƒ，text:ƒ，textarea:ƒ，select:ƒ，…} editableutils:{inherit:ƒ，setCursorPosition:ƒ，tryParseJson:ƒ， sliceObj:ƒ，getConfigData:ƒ，…}空：ƒ（）结束：ƒ（）等式：ƒ（e） 错误：ƒ（e，n）extend:ƒ（）fadeIn:ƒ（e，n，r）fadeOut:ƒ（e，n，r） fadeTo:ƒ（e，t，n，r）fadeToggle:ƒ（e，n，r）filter:ƒ（e）find:ƒ（e） 完成：ƒ（e）首先：ƒ（）聚焦：ƒ（e，n）聚焦：ƒ（e，n）聚焦输出：ƒ （e，n）get:ƒ（e）has:ƒ（e）has:class:ƒ（e）height:ƒ（r，i）hide:ƒ （e，r，i）hover:ƒ（e，t）html:ƒ（e）index:ƒ（e）init:ƒ（e，t，n） 内高：ƒ（r，i）内宽：ƒ（r，i）插入后：ƒ（e） insertBefore:ƒ（e）is:ƒ（e）jquery:“2.0.3”键下：ƒ（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）popover:ƒ（c） 位置：ƒ（）prepend:ƒ（）prependTo:ƒ（e）prev:ƒ（n，r）prevAll:ƒ （n，r）prevUntil:ƒ（n，r）承诺：ƒ（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）select:ƒ （e，n）选择器：“serialize:ƒ（）serializeArray:ƒ（）show:ƒ” （e，r，i）兄弟：ƒ（n，r）大小：ƒ（）切片：ƒ（）向下滑动：ƒ（e，n，r） 滑动切换：ƒ（e，n，r）滑动：ƒ（e，n，r）排序：ƒ排序（）拼接：ƒ 拼接（）停止：ƒ（e，t，n）提交：ƒ（e，n）选项卡：ƒ（c）文本：ƒ（e） toArray:ƒ（）切换：ƒ（e，r，i）切换类：ƒ（e，t）工具提示：ƒ（c） 触发器：ƒ（e，t）triggerHandler:ƒ（e，t）typeahead:ƒ（c）unbind:ƒ （e，t）取消受遗赠人：ƒ（e，t，n）卸载：ƒ（e，n）展开：ƒ（）val:ƒ（e） 宽度：ƒ（r，i）包裹：ƒ（e）包裹：ƒ（e）包裹：ƒ（e）包裹：ƒ（e） 原型：对象

---

来自的引用问题在于您对

show.bs.modal

事件的使用。您正在将它绑定到您的删除按钮

#deleteuseradmin

，此时它应该绑定到模式窗口本身

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

按钮HTML 请注意，

id

属性设置为

deletemodel

Javascript

$（'#deleteModal'）.on（'show.bs.modal'，函数（事件）{
var按钮=$（event.relatedTarget）
var userid=button.data（'userid'）
var modal=$（此）
控制台日志（按钮）；
});

请注意，我们将

show.bs.modal

事件绑定到模式窗口

deleteModal

的

id

，而不是按钮的

id

。

在刀片文件中：

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

$（文档）.on（'单击'，'。'删除数据'，函数（））{
var user_id=$（this.attr（'data-userid'）；
console.log（'user\u id:：'，user\u id）；//您的数据属性值
//现在打开你的模型
$（“#deleteuseradmin”）.modal（'show'）；
});

控制台的屏幕截图将比那堵文本墙提供更多信息，而且由于

按钮

是一个jQuery对象，使用

控制台.log（按钮[0]）可以获得更好的控制台结果

实际的问题是什么？你的代码不起作用吗？与实际发生的情况相比，你期望发生什么？@Phil结果是未定义的这是我猜的重复。我猜它不起作用的唯一原因是relatedTarget不是你真正想要的按钮，或者没有正确地转换为JQuery元素。无论如何，我建议你您可以通过原生方式

button.getAttribute（'data-userid'）

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

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

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

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

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