Как добавить атрибут .data к динамически создаваемым элементам

Question

Я динамически создаю элементы из $.get запроса, к каждому из созданных элементов мне нужно добавить атрибут данных с объектом из этого запроса.

Итак, давайте предположим, что у меня есть следующие $.get request:

    $('.loader').show();
      $.get(api)
        .done(function (data) {

          let plu = [];
          data.map(d => {
            if (d.codplu == "COPERTI" || d.desc == "") return false;

            plu.push('<div class="card card-product" data-toggle="modal" data-target="#modalProduct" data-plu="' + d.id + '">')
            if (d.img) {
              plu.push('<img class="img-fluid" src="data:image/png;base64,' + d.img + '">')
            } else {
              plu.push('<img class="img-fluid d-none" src="">')
            }

            plu.push('<div class="card-body">')
            plu.push('<div class="row">')
            plu.push('<div class="col">')
            plu.push('<h5 class="card-title mb-0">' + d.desc + '</h5>')
            plu.push('</div>')
            plu.push('<div class="col-auto">')
            plu.push('<h5 class="text-right text-success price">' + formatPrezzo(d.prezzo) + '</h5>')
            plu.push('</div>')
            plu.push('</div>')
            plu.push('<p class="card-tag mb-0">')
            d.attributi.map(attr => {
              plu.push('<span class="badge badge-success mr-1" style="background-color: ' + toColor(attr.background) + '; color: ' + toColor(attr.text) + ';">' + attr.desc + '</span>')
            })
            plu.push('</p>')
            plu.push('<p class="card-text text-muted">' + d.estesa + '</p>')
            if (profilo.moduli.ordine_menu && profilo.tavolo != "0") {
              plu.push('<a href="#" class="btn btn-outline-primary btn-block add-cart cd-add-to-cart js-cd-add-to-cart" data-price="' + d.prezzo.toFixed(2) + '">' + AddToCartText() + '</a>') // BUTTON CREATED HERE
            }
            plu.push('</div>')
            plu.push('</div>')
          })
          $('#' + menu + '-tab > .card-columns').append(plu.join(""));
          $('.loader').fadeOut("slow");
        })

Для каждой кнопки, созданной в каждом элементе, я должен добавить атрибут .data, но как я могу сделать это, не повторяя снова каждую кнопку и проверяя его идентификатор, чтобы установить правильный .data атрибут?

Answer 1

Поскольку вы используете jQuery, используйте его в полной мере и создайте все элементы, используя соответствующие методы jQuery. Это имеет дополнительное преимущество в том, что вы избегаете потенциальных проблем с экранированием символов и избегаете случайных ошибок при открытии / закрытии тегов.

Итак, вот как ваш код может быть преобразован в стиль, более jQuery. Тогда также легко позвонить .data в подходящее место:

$('.loader').show();
$.get(api).done(function (data) {
    $('#' + menu + '-tab > .card-columns').append(
        data.map(d => d.codplu == "COPERTI" || d.desc == "" ? ""
            : $("<div>", { 
                "class": "card card-product",
                "data-toggle": "modal",
                "data-target": "#modalProduct",
                "data-plu": d.id
            }).append($("<img>", {
                    "class": "img-fluid" + (d.img ? "" : " d-none"),
                    src: d.img ? "data:image/png;base64," + d.img : "",
                }),
                $("<div>").addClass("card-body").append(
                    $("<div>").addClass("row").append(
                        $("<div>").addClass("col").append(
                            $("<h5>").addClass("card-title mb-0").text(d.desc)
                        ),
                        $("<div>").addClass("col-auto").append(
                            $("<h5>").addClass("text-right text-success price").text(formatPrezzo(d.prezzo))
                        )
                    ),
                    $("<p>").addClass("card-tag mb-0").append(
                        d.attributi.map(attr =>
                            $("<span>").addClass("badge badge-success mr-1").css({ 
                                backgroundColor: toColor(attr.background),
                                color: toColor(attr.text)
                            }).text(attr.desc)
                        )
                    ),
                    $("<p>").addClass("card-text text-muted").text(d.estesa),
                    profilo.moduli.ordine_menu && profilo.tavolo != "0" 
                        ? $("<a>", { 
                            href: "#",
                            "class": "btn btn-outline-primary btn-block add-cart cd-add-to-cart js-cd-add-to-cart",
                            "data-price": d.prezzo.toFixed(2)
                        }).text(AddToCartText()).data(d.varianti)
                        : ""
                )
            )
        )
    )
    $('.loader').fadeOut("slow");
});

Answer 2

Вновь добавленные элементы добавляются как необработанные HTML, поэтому, чтобы вызвать для них метод jQuery, вам нужно будет переписать свой код, чтобы каждый элемент происходил из переменной.

Альтернативой является поиск новых элементов, начиная с объекта jQuery, который у вас уже есть (если у вас есть что-то, что их идентифицирует):

const menu = "foo";
let plu = [];
plu.push("<div>One</div>");
plu.push("<div>Two</div>");
$('#' + menu + '-tab > .card-columns')
  .append(plu.join(""))
  .find("div:nth-child(1)").css({color: "green"}).data("data1", "value1").end()
  .find("div:nth-child(2)").css({color: "blue"}).data("data2", "value2").end()
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo-tab">
  <div class="card-columns">Your items here:</div>
</div>