Magento 2 -创建带有data-mage-init属性的html元素-使用Js/Jquery

of1yzvn4  于 2022-11-12  发布在  jQuery
关注(0)|答案(2)|浏览(150)

我 正在 使用 ajax 来 添加/删除 页面 上 的 元素 。 当 元素 被 添加/删除 时 , 会 显示 警报 小 部件 。 我 正在 使用 data-mage - init 属性 来 触发 js , 当 元素 被 点击 时 。 当 使用 jquery 添加 新元素 时 , 我 如何 使用 data-mage - init 属性 来 生成 它 ?
1 ) 当 在 模板 中 创建 元素 时 , data-mage - init 属性 在 页面 上 不可 见 , 但 它 起 作用 。 ( 当 单击 ' a ' 元素 时 触发 Js ) 。

    • 模板 : * *
<div class="item">
                <div class="item-content">
                    <div class="name"><?= $product['name']; ?></div>
                    <div class="sku"><?= $product['sku']; ?></div>
                    <div class="remove-action">
                        <a
                            data-mage-init='{"learningPath": <?= json_encode(['removeUrl' => $block->getUrl('corporate/learning/removeCourse'), 'productId' => $product['id']]) ?>}'
                            href="#" class="action secondary"><?= __('Remove'); ?></a>
                    </div>
                </div>

中 的 每 一 个

    • 浏览 器 : * *

.. 但是 当 我 用 js 生成 这个 元素 时 , data-mage - init 属性 是 可见 的 , 并且 它 不 起 作用 。

    • Js 文件 : * *
$('.path-builder-selection .selection-container').append("<div class='item'><div class='item-content'>" +
                        "<div class='name'>\n" + data['product']['name'] + "</div>" +
                        "<div class='sku'>"+ data['product']['sku'] + "</div>" +
                        "<div class='remove-action'><a data-mage-init='{\"learningPath\":{\"removeUrl\": " + data['remove_url'] + ", \"productId\": " + data['product']['id'] + "}}' href='#' class='action secondary'>" + data['remove_label'] + "</a></div>\n" +
                        "</div></div>");

格式

    • 浏览 器 : * *


语言

    • 结论 : * * 当 我 通过 js 用 data-mage - init 属性 创建 新元素 时 , 它 没有 被 解析 。 有 没有 什么 方法 可以 通过 js/jquery 添加 元素 , 并 向 它 添加 data-mage - init 属性 。 ( 如果 以后 需要 js , 可以 删除 该 元素 , 否则 我 不能 删除 元素 , 因为 data-mage - init 没有 被 解析 , js 没有 被 触发 )
quhf5bfb

quhf5bfb1#

这是一个古老的问题,但也许它对别人有帮助:
将data-mage-init作为属性添加,假设您要添加一个菜单:

$(elem).attr(
      "data-mage-init",
      JSON.stringify({
        menu: {
            responsive: true,
            expanded: true,
            position: {
                my: "left top",
                at: "left bottom",
            },
        },
    })
);
jQuery.mage.init();

这样,您就可以初始化元素。

yeotifhr

yeotifhr2#

在动态内容中执行data-mage-init和x-magento-init

若要在注入动态内容时触发元素上的.trigger('contentUpdated'),请用途:

$.ajax({
    url: 'https://www.example.com',
    method: 'POST',
    data: {
        id: '1'
    },
    success: function (data) {
        $('.example-element').html(data)
                             .trigger('contentUpdated')
    }
});

相关问题