javascript - 无法检索数据属性值

Question

我正在尝试获取 data-* 属性的值，以使用 Bootstrap 进行删除确认。问题是我无法获取 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>

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

Admin-view:488 initproto: Object(0) DataTable: ƒ (t) add: ƒ (e,t) addBack: ƒ (e) addClass: ƒ (e) affix: ƒ (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:ƒ () bind: ƒ (e,t,n) blur: ƒ (e,n) button: ƒ (c) carousel: ƒ (c)change: ƒ (e,n) children: ƒ (n,r) clearQueue: ƒ (e) click: ƒ (e,n)clone: ƒ (e,t) closest: ƒ (e,t) collapse: ƒ (c) combodate: ƒ (n)constructor: ƒ (e,n) contents: ƒ (n,r) contextmenu: ƒ (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) dropdown: ƒ (b) each: ƒ (e,t) editable: ƒ (n)editableContainer: ƒ (r) editableform: ƒ (n) editabletypes:{abstractinput: ƒ, list: ƒ, text: ƒ, textarea: ƒ, select: ƒ, …}editableutils: {inherit: ƒ, setCursorPosition: ƒ, tryParseJson: ƒ,sliceObj: ƒ, getConfigData: ƒ, …} empty: ƒ () end: ƒ () eq: ƒ (e)error: ƒ (e,n) extend: ƒ () fadeIn: ƒ (e,n,r) fadeOut: ƒ (e,n,r)fadeTo: ƒ (e,t,n,r) fadeToggle: ƒ (e,n,r) filter: ƒ (e) find: ƒ (e)finish: ƒ (e) first: ƒ () focus: ƒ (e,n) focusin: ƒ (e,n) focusout: ƒ(e,n) get: ƒ (e) has: ƒ (e) hasClass: ƒ (e) height: ƒ (r,i) hide: ƒ(e,r,i) hover: ƒ (e,t) html: ƒ (e) index: ƒ (e) init: ƒ (e,t,n)innerHeight: ƒ (r,i) innerWidth: ƒ (r,i) insertAfter: ƒ (e)insertBefore: ƒ (e) is: ƒ (e) jquery: "2.0.3" keydown: ƒ (e,n)keypress: ƒ (e,n) keyup: ƒ (e,n) last: ƒ () length: 0 load: ƒ (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) one: ƒ (e,t,n,r) outerHeight: ƒ (r,i) outerWidth: ƒ (r,i)parent: ƒ (n,r) parents: ƒ (n,r) parentsUntil: ƒ (n,r) popover: ƒ (c)position: ƒ () prepend: ƒ () prependTo: ƒ (e) prev: ƒ (n,r) prevAll: ƒ(n,r) prevUntil: ƒ (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) scrollspy: ƒ (c) select: ƒ(e,n) selector: "" serialize: ƒ () serializeArray: ƒ () show: ƒ(e,r,i) siblings: ƒ (n,r) size: ƒ () slice: ƒ () slideDown: ƒ (e,n,r)slideToggle: ƒ (e,n,r) slideUp: ƒ (e,n,r) sort: ƒ sort() splice: ƒsplice() stop: ƒ (e,t,n) submit: ƒ (e,n) tab: ƒ (c) text: ƒ (e)toArray: ƒ () toggle: ƒ (e,r,i) toggleClass: ƒ (e,t) tooltip: ƒ (c)trigger: ƒ (e,t) triggerHandler: ƒ (e,t) typeahead: ƒ (c) unbind: ƒ(e,t) undelegate: ƒ (e,t,n) unload: ƒ (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

在 Blade 文件中:

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