Question

我正在尝试访问复选框的data属性以传递给PHP脚本来更新我的数据库。

HTML看起来像这样：

<input type="checkbox" data-entid="1"onchange="updateOrDeleteEntitlements()" 
checked>

jQuery函数是：

 function updateOrDeleteEntitlements() {
    var role = $('#selectedRole').val();
    var ent = $(this).data('entid');
    var binMe = '';

     $.ajax({
      url: 'ajax/update_delete_entitlements.php',
      type: 'post',
      data: {'role': $role, 'ent': ent, 'delete': $binMe},
      success: function(data) {
        console.log(data);
      }
    }); 
 }

行var ent = $(this).data('entid');应该存储复选框中保存的数据，这样我就可以在我的AJAX中传递它但是返回undefined。

花了大约一个小时尝试一些稍微不同的东西，但似乎什么都没有用。我也在我的代码中的其他地方使用了同样的东西（但是从tr而不是输入中提取数据）所以我完全不知所措。

非常感谢任何帮助

Answer 1

此不会引用它引用window对象的复选框元素。您需要在内联更改事件处理程序中传递当前元素，即this，并在方法中接受它，然后使用它来检索数据。

HTML 的

<input type="checkbox" data-entid="1"onchange="updateOrDeleteEntitlements(this)" checked>

脚本

function updateOrDeleteEntitlements(elem) { 
    var ent = $(elem).data('entid');    
}

我建议你使用不引人注意的事件处理技术。使用.on()方法附加事件处理程序。使用它，this将引用复选框，因此您的代码将起作用。

HTML 的

<input class="myCheckbox" type="checkbox" data-entid="1" checked>

脚本

$('.myCheckbox').on('change', updateOrDeleteEntitlements)

$('.myCheckbox').on('change', updateOrDeleteEntitlements);

function updateOrDeleteEntitlements() {
  var ent = $(this).data('entid');
  console.log(ent)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="myCheckbox" type="checkbox" data-entid="1" checked>

Answer 2

你在没有上下文的情况下调用函数，因此this不是你认为它应该是的元素。

您可以按如下方式设置上下文：

<input type="checkbox" data-entid="1" onchange="updateOrDeleteEntitlements.call(this)">

但是，通常认为在代码中附加事件处理程序更好，而不使用onchange属性。然后，您可以在主脚本中添加此行：

$('input[type=checkbox]').change(updateOrDeleteEntitlements);

根据需要调整传递给$()的选择器。

Answer 3

在这一行

var ent = $(this).data('entid');

您打算获取data-entid的{{1}}属性，但这不是您的复选框。未经测试的建议：

checkbox

和

<input type="checkbox" data-entid="1"onchange="updateOrDeleteEntitlements(this)" 
checked>

当我尝试访问元素的数据时，为什么jQuery返回undefined？

3 个答案: