HTML代码

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 ：对象（0）数据表：ƒ（t）添加：ƒ（e，t）addBack：ƒ（e）addClass：ƒ（e）后缀：ƒ（c）之后：ƒ（） ajaxComplete：ƒ（e） ajaxError：ƒ（e）ajaxSend：ƒ（e）ajaxStart：ƒ（e）ajaxStop：ƒ（e） ajax成功：ƒ（e）警报：ƒ（b）andSelf：ƒ（e）动画：ƒ（e，t，n，r） append：ƒ（）appendTo：ƒ（e）attr：ƒ（e，t）bdatepicker：ƒ（t）之前： ƒ（）绑定：ƒ（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）数据表：ƒ（t）dataTableExt：{按钮：{…}，类：{…}，内部版本：“ 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： {摘要输入：ƒ，列表：ƒ，文本：ƒ，文本区域：ƒ，选择：ƒ，…} editableutils：{继承：ƒ，setCursorPosition：ƒ，tryParseJson：ƒ， sliceObj：ƒ，getConfigData：ƒ，…}空：ƒ（）结束：ƒ（）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）hasClass：ƒ（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” keydown：ƒ（e，n）按键：ƒ（e，n）按键：ƒ（e，n）最后：ƒ（）长度：0负载：ƒ（e，t，n）映射：ƒ（e）模态：ƒ（c）鼠标按下：ƒ（e，n）鼠标输入：ƒ（e，n） mouseleave：ƒ（e，n）mousemove：ƒ（e，n）mouseout：ƒ（e，n）mouseover：ƒ （e，n）mouseup：ƒ（e，n）下一个：ƒ（n，r）nextAll：ƒ（n，r）nextUntil：ƒ （n，r）不：ƒ（e）关闭：ƒ（e，t，n）偏移量：ƒ（e）offsetParent：ƒ（）开启：ƒ （e，t，n，r，i）一个：ƒ（e，t，n，r）externalHeight：ƒ（r，i）externalWidth：ƒ（r，i）父：ƒ（n，r）父母：ƒ（n，r）父母直到：ƒ（n，r）弹出框：ƒ（c）位置：ƒ（）前置：ƒ（）prependTo：ƒ（e）上一个：ƒ（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）选择：ƒ （e，n）选择器：“” serialize：ƒ（）serializeArray：ƒ（）显示：ƒ （e，r，i）兄弟姐妹：ƒ（n，r）大小：ƒ（）切片：ƒ（）slideDown：ƒ（e，n，r） slideToggle：ƒ（e，n，r）slideUp：ƒ（e，n，r）排序：ƒsort（）拼接：ƒ splice（）停止：ƒ（e，t，n）提交：ƒ（e，n）选项卡：ƒ（c）文本：ƒ（e） toArray：ƒ（）切换：ƒ（e，r，i）切换类：ƒ（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事件绑定到模式窗口id的{{1}}，而不是按钮的deleteModal。 < / p>

无法检索数据属性值

HTML代码

Javascript代码

2 个答案:

按钮HTML

模式HTML

Javascript