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

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中传递它，但返回的是未定义的。

花了大约一个小时尝试一些略有不同的事情，但似乎没有任何效果。 我还在代码的其他地方使用了相同的东西（但是从tr而不是从输入中提取数据），所以我完全迷惑了。

任何帮助深表感谢

Answer 1

这并不涉及复选框元素，而是指window对象。 您需要在inline-change事件处理程序中传递当前元素，即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');

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

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

和

 function updateOrDeleteEntitlements(context) {
    var role = $('#selectedRole').val();
    var ent = $(context).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);
      }
    }); 
 }