如何解决jQuery无法检测到数据属性
我一直试图通过JQuery
使用的data属性传递这些数据,但是由于某些原因,当我控制台记录它们时,其中一些是不确定的。如图所示,JQuery仅读取$subscription->id
和$subscription->tax
变量,其余未定义。
我正在使用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>
标记中,然后像这样在该类中监听click event
<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>
,
我已经弄清楚了,这与刀片文件中data属性的命名有关!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。