JQuery 未检测到数据属性

Question

我一直在尝试通过数据属性传递这些数据，这些数据随后将被 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() blade 文件上的变量时，它们执行 return 数据，但是当我在控制台中登录它们时 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 的名称，但仍然没有雪茄。我希望有人能阐明这一点。

Answer 1

您需要将 class 添加到 <a> 标签，然后收听 click event class 喜欢

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

Answer 2

我想通了，这与我的 blade 文件中数据属性的命名有关！

JQuery 未检测到数据属性

Data attributes not getting detected by JQuery

php

jquery

laravel

laravel-blade