Safari中丢失的HTML5数据属性

Question

我有一个jQueryUI模式，它基于HTML5数据属性加载其内容：

<button id="add-dates-button" name="add-dates-button" href="#" class="dialog-ajax-form" data-table="jto-dates-add" data-title="Add Job" data-id="<?=$jto_id?>">Add Date(s)</button>

通过单击按钮触发以下（部分）脚本，我得到了FF中的变量，可以很好地打印到控制台。 但是，在Safari中，它们都发布未定义的内容：

$(document).on('click','.dialog-ajax-form',function(e){
    e.preventDefault(); 
    var targete = $(e.target);
    var tbl = $(e.target).data('table');
    var id = $(e.target).data('id');
    var title = $(e.target).data('title');
    console.log(title);
    console.log(id);
    console.log(targete);
    console.log(tbl);

但是，如果我使用以下内容访问Safari中的属性，则可以获得该值：

console.log( document.getElementById('add-dates-button').getAttribute( 'data-table' ) );

我在很多地方都使用了dialog-ajax-form脚本，因此，专门访问变量并不理想。 谁能解释为什么我在Safari中丢失这些值？

Answer 1

您确定$(e.target)元素是Safari中的按钮吗？ 您的选择器.dialog-ajax-form并非特定于<button id="add-dates-button">元素，但我认为它包含在表单中。

您需要找到具有属性的元素，也许使用：

var $target = $(e.target);
var tbl = $target.data('table') || $target.find('[data-table]').data('table');

如果具有$(e.target)属性，它将使用该属性，否则将使用该属性查找子级。