php - JQuery 未检测到数据属性
问题描述
我一直在尝试通过 data 属性传递这些数据,然后将使用该属性JQuery
,但由于某种原因,当我控制台记录它们时,其中一些是未定义的。正如您在图片中看到的,只有$subscription->id
和$subscription->tax
变量被 JQuery 读取,而其余的未定义。
我正在使用laravel blade
,这是负责将这些数据发送到的代码JQuery
:
<a
class="btn btn-sm mt-1 btn-light btn-outline-dark col-12"
href="#"
data-toggle="modal"
data-target="#edit-subscription-modal"
data-id="{{$subscription->id}}"
data-cId="{{$subscription->customer_id}}"
data-uId="{{$subscription->user_id}}"
data-pId="{{$subscription->product_id}}"
data-sDate="{{$subscription->startDate}}"
data-eDate="{{$subscription->endDate}}"
data-pTerms="{{$subscription->paymentTerms}}"
data-tax="{{$subscription->tax}}"
>Edit</a>
当我dd()
使用刀片文件上的变量时,它们确实返回数据,但是当我通过控制台登录它们时JQuery
,它们变成undefined
. 这是 JQuery 代码块:
$('#edit-subscription-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var subscriptionId = button.data('id')
var customerId = button.data('cId')
var userId = button.data('uId')
var productId = button.data('pId')
var startDate = button.data('sDate')
var endDate = button.data('eDate')
var paymentTerms = button.data('pTerms')
var tax = button.data('tax')
var modal = $(this)
console.log(subscriptionId)
console.log(customerId)
console.log(userId)
console.log(productId)
console.log(startDate)
console.log(endDate)
console.log(paymentTerms)
console.log(tax)
modal.find('.modal-body #subscription-id').val(subscriptionId)
})
我已经尝试更改 的名称data attributes
,但仍然没有雪茄。我希望有人可以阐明这一点。
解决方案
您需要将类添加到<a>
标记然后侦听该类的单击事件,例如
<a
class="btn btn-sm mt-1 btn-light btn-outline-dark col-12 subscription-modal-click"
href="#"
data-toggle="modal"
data-target="#edit-subscription-modal"
data-id="{{$subscription->id}}"
data-cId="{{$subscription->customer_id}}"
data-uId="{{$subscription->user_id}}"
data-pId="{{$subscription->product_id}}"
data-sDate="{{$subscription->startDate}}"
data-eDate="{{$subscription->endDate}}"
data-pTerms="{{$subscription->paymentTerms}}"
data-tax="{{$subscription->tax}}"
>Edit</a>
<script>
$('.subscription-modal-click').click(function(){
var button = $(this) // Button that triggered the modal
var subscriptionId = button.data('id')
var customerId = button.data('cId')
var userId = button.data('uId')
var productId = button.data('pId')
var startDate = button.data('sDate')
var endDate = button.data('eDate')
var paymentTerms = button.data('pTerms')
var tax = button.data('tax')
var modal = $(this)
console.log(subscriptionId)
console.log(customerId)
console.log(userId)
console.log(productId)
console.log(startDate)
console.log(endDate)
console.log(paymentTerms)
console.log(tax)
modal.find('.modal-body #subscription-id').val(subscriptionId)
})
</script>
推荐阅读
- python - 删除python列表中的重复元素
- objective-c - 在 NSURLSession 完成处理程序中执行 WKWebview 加载请求
- html - 如何在两个引导按钮之间留出空间
- sqlite - 参考数据更改列表视图中的按钮
- python - 单元测试 Python Azure 函数:如何使用 JSON 有效负载构造模拟测试请求消息?
- vim - 即使将列表项复制到局部变量,在快速修复项列表上调用排序时也会出错
- qt - 如何使用 Bazel 构建 Qt 项目?
- algorithm - 如何计算将 NXM 二进制矩阵转换为全 0 矩阵的成本,仅允许移动作为方阵切换?
- javascript - 通过 chrome.webRequest.onBeforeSendHeaders API 提取整个 http 请求
- html - Safari flex 内容上方的子水平滚动条(内容高度不正确)