PHP jQuery HTML - 获取自定义 HTML 属性答案

【问题标题】：PHP jQuery HTML - Getting custom HTML attributePHP jQuery HTML - 获取自定义 HTML 属性
【发布时间】：2016-11-22 10:47:22
【问题描述】：

我有一个 PHP 文件，它列出系统中的所有订单并将自定义属性 oid (order-id) 添加到所有链接。我的链接看起来像：

<a href='#' class='completeOrder' oid='$order_id'>$status</a>

哪个给出了正确的 html，当我检查元素时，我得到了这个

<a href='#' class='completeOrder' oid='8'>Un-completed</a>

我想要做的是，当单击此链接时，生成一个带有复选框的表单和一个提交按钮，其中包含要发送的 html 中的正确订单 ID。所以我可以将表单和订单 ID 发送到另一个 PHP 文件进行处理（在这种情况下更新订单状态）。

我正在使用 jQuery AJAX 调用来生成带有复选框的表单，但是当我尝试提醒订单 ID 以检查 jQuery 是否正确获取了 oid 时，它告诉我它的未定义...：

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();
    getCompleteOrderTools();

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools() {
    var o_id = $(this).attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}

【问题讨论】：

你的 jquery 版本？？？
请注意，您的 HTML 中的自定义属性无效。如果要在元素中存储自定义元数据，请改用 data-* 属性。 delegate 在很久之前也被弃用了。您应该更新您的 jQuery 版本并改用 on()
真的吗？因为在产品部分我能够设置 pid = product_id.. 并使用相同的技术并且它有效？
它可能会起作用，因为 HTML 非常宽容（有些人会说太多），但它是无效的。
为了解决您的问题，getCompleteOrderTools() 中的this 将不是您单击的元素，因为它在不同的范围内被调用。您需要将元素作为参数提供给函数。

标签： javascript php jquery html ajax

【解决方案1】：

您的主要问题是您在错误的上下文中引用了this，因为您的函数getCompleteOrderTools 中可用的this 与您想要为所需链接的点击事件引用的this 不同。

你有两个选择：

要么使用jQuery(this).attr('oid');

或者

使用 jquery data 属性

<a href='#' class='completeOrder' data-oid='$order_id'>$status</a>

jQuery(this).data('oid');

所以你的.attr 代码看起来像：

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();

    var myThis = $(this);//This is the 'this' corresponding to the link clicked

    getCompleteOrderTools(myThis);

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools(myThis) {

    var o_id = myThis.attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}

【讨论】：

【解决方案2】：

jQuery 对象没有传递给您的函数。您应该执行以下操作：

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();
    getCompleteOrderTools(jQuery(this));

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools(_this) {
    var o_id = _this.attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}

通过将jQuery(this) 传递给您的函数，您现在可以从点击事件中完全访问jQuery 对象。

【讨论】：