Невозможно получить значение атрибута данных

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 Code

<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 init proto : Object (0) DataTable: ƒ (t) add: ƒ (e, t) addBack: ƒ (e) addClass: ƒ(e) аффикс: ƒ (c) после: ƒ () ajaxПолный: ƒ (e) ajaxError: ƒ (e) ajaxSend: ƒ (e) ajaxStart: ƒ (e) ajaxStop: ƒ (e) ajaxSuccess: ƒ (e)alert: ƒ (b) и Self: ƒ (e) animate: ƒ (e, t, n, r) append: ƒ () appendTo: ƒ (e) attr: ƒ (e, t) bdatepicker: ƒ (t) перед: ƒ () bind: ƒ (e, t, n) размытие: ƒ (e, n) кнопка: ƒ (c) карусель: ƒ (c) изменение: ƒ (e, n) дети: ƒ (n, r)clearQueue: ƒ (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: «оповещение», функция: Array (0),…} dataTableSettings: [{…}] datepicker: ƒ (t) dblclick: ƒ (e, n) задержка: ƒ (e, t) делегат: ƒ (e, t, n, r) очередь: ƒ (e) отсоединение: ƒ(e) domManip: ƒ (e, t, n) раскрывающийся список: ƒ (b) каждый: ƒ (e, t) редактируемый: ƒ (n) editableContainer: ƒ (r) editableform: ƒ (n) editabletypes: {abstractinput:ƒ, список: ƒ, текст: ƒ, текстовое поле: ƒ, выберите: ƒ,…} editableutils: {унаследовать: ƒ, setCursorPosition: ƒ, tryParseJson: ƒ, sliceObj: ƒ, getConfigData: ƒ,…} пусто: ƒ ()end: ƒ () eq: ƒ (e) ошибка: ƒ (e, n) продлить: ƒ () fadeIn: ƒ (e, n, r) fadeOut: ƒ (e, n, r) fadeTo: ƒ (e,t, n, r) fadeToggle: ƒ (e, n, r) фильтр: ƒ (e) найти: ƒ (e) закончить: ƒ (e) сначала: ƒ () фокус: ƒ (e, n) фокус: ƒ(e, n) Фокусировка: ƒ (e, n) получить: ƒ (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) это: ƒ (e) jquery: «2.0.3» нажатие клавиши: ƒ (e, n) нажатие клавиши: ƒ (e, n) нажатие клавиши: ƒ (e, n)последний: ƒ () длина: 0 загрузка: ƒ (e, t, n) карта: ƒ (e) модал: ƒ (c) mousedown: ƒ (e, n) указатель мыши: ƒ (e, n) отпуск мышью: ƒ (e, n) указатель мыши: ƒ (e, n) указатель мыши: ƒ (e, n) указатель мыши: ƒ (e, n) указатель мыши: ƒ (e, n) следующий: ƒ (n, r) nextAll: ƒ (n,r) nextUntil: ƒ (n, r) not: ƒ (e) выключено: ƒ (e, t, n) смещение: ƒ (e) offsetParent: ƒ () включено: ƒ (e, t, n, r, i) one: ƒ (e, t, n, r) externalHeight: ƒ (r, i) externalWidth: ƒ (r, i) родитель: ƒ (n, r) родители: ƒ (n, r) родителиUntil: ƒ (n, r) popover: ƒ (c) позиция: ƒ () prepend: ƒ () prependTo: ƒ (e) prev: ƒ (n, r) prevAll: ƒ (n, r) prevUntil: ƒ (n, r) обещание: ƒ (e, t) проп:: (e, t) push: ƒ push () pushStack: ƒ (e) очередь: ƒ (e, t) готова: ƒ (e) удалить: ƒ (e, t) удалитьAttr: ƒ (e) removeClass: ƒ (e) removeData: ƒ (e) removeProp: ƒ (e) replaceAll: ƒ (e) replaceWith: ƒ () изменить размер: ƒ (e, n) прокрутить: ƒ (e, n)scrollLeft: ƒ (i) scrollTop: ƒ (i) scrollspy: ƒ (c) выберите: ƒ (e, n) селектор: "" serialize: ƒ () serializeArray: ƒ () показать: ƒ (e, r, i)братья и сестры: ƒ (n, r)size: ƒ () slice: ƒ () slideDown: ƒ (e, n, r) slideToggle: ƒ (e, n, r) slideUp: ƒ (e, n, r) sort: ƒ sort () splice: ƒ splice() стоп: ƒ (e, t, n) отправить: ƒ (e, n) вкладка: ƒ (c) текст: ƒ (e) toArray: ƒ () toggle: ƒ (e, r, i) toggleClass: ƒ(e, t) подсказка: ƒ (c) триггер: ƒ (e, t) triggerHandler: ƒ (e, t) указатель: type (c) отмена привязки: ƒ (e, t) отмена подписи: ƒ (e, t, n) выгрузить: ƒ (e, n) развернуть: ƒ () val: ƒ (e) ширина: ƒ (r, i) обернуть: ƒ (e) обернуть все: ƒ (e) обернуть Внутренний: ƒ (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 имеет значение id модального окна deleteModal.

Модальный 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 с id модального окна deleteModal, а не с id кнопки.