JS jQuery loop for create HTML cards

Question

I work with jQuery loop for creating HTML parts.

And I want to create cards which are creating depending on an array at where I have some data, this part is done.

But for each card, I have a button for which I create an ID, and from function:

on("click", function ()

I call allert, and this alert working only for the first box.

CSS:

.cards {
    margin: -1rem;
}

.card {
    width: 220px;
    float: left;
    margin: 1rem;
    border: 1px solid #d3d3d3;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

@supports (display: grid) {
    .cards {
        margin: 0;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 1rem;
    }
}

HTML:

<main class="cards">
    <div id="test12"></div>
</main>

JS:

$.each(mokData, function (i) {
    var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button id="tes">Start</button></article>';
    $('#test12').append(templateString);
})

$("#tes")on("click", function () {
    alert("test");
});

My array:

var mokData = [
{ category: "Material", id: '1', name: 'Brakedown of machine' },
{ category: "Material", id: '2', name: 'Brakedown of machine' },
{ category: "Tool", id: '3', name: 'Brakedown of machine' },
{ category: "Tool", id: '4', name: 'Brakedown of line' },
{ category: "Tool", id: '5', name: 'Brakedown of machine' },
{ category: "Tool", id: '6', name: 'Brakedown of line' },
{ category: "Tool", id: '7', name: 'Brakedown of machine' },
{ category: "Tool", id: '8', name: 'Brakedown of line' }
];

Maybe you will see the problem, because I am stuck, and try find a solution already for the half day :(

Id's are supposed to be unique. So use class attribute to achieve the same. you can use `.` selector to select classes --> `$(".className")` — Krishna Prashatt, Apr 25 '19 at 11:21
`$("#tes")on("click"` should be `$("#tes").on("click"`. This is a syntax error that breaks your code, it just can't run unless you fix this. — Jeremy Thille, Apr 25 '19 at 11:23
Possible duplicate of [getElementById returning value only for first element](https://stackoverflow.com/questions/24123707/getelementbyid-returning-value-only-for-first-element) — Heretic Monkey, Apr 25 '19 at 11:51

score 1 · Answer 1 · answered Apr 25 '19 at 11:26

1

$(document).ready(function(){
var mokData = [
{ category: "Material", id: '1', name: 'Brakedown of machine' },
{ category: "Material", id: '2', name: 'Brakedown of machine' },
{ category: "Tool", id: '3', name: 'Brakedown of machine' },
{ category: "Tool", id: '4', name: 'Brakedown of line' },
{ category: "Tool", id: '5', name: 'Brakedown of machine' },
{ category: "Tool", id: '6', name: 'Brakedown of line' },
{ category: "Tool", id: '7', name: 'Brakedown of machine' },
{ category: "Tool", id: '8', name: 'Brakedown of line' }
];
$.each(mokData, function (i) {
    var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button id="tes">Start</button></article>';
    $('#test12').append(templateString);
})

$("#test12").on("click", function () {
    alert("test");
});
});

.cards {
    margin: -1rem;
}

.card {
    width: 220px;
    float: left;
    margin: 1rem;
    border: 1px solid #d3d3d3;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

@supports (display: grid) {
    .cards {
        margin: 0;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 1rem;
    }


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="cards">
                    <div id="test12"></div>
                </main>

Its working..

answered Apr 25 '19 at 11:26

Esakki s

34
3

This adds a click event on the whole div `test12` and not on every button. That means you can click on the whole div to alert! – Zorken17 Apr 25 '19 at 11:32
Only for button click $("#test12 button").on("click", function () { alert("test"); }); }); – Esakki s Apr 26 '19 at 05:09
The queries was raised for click event that's happening only once not element. – Esakki s Apr 26 '19 at 09:27
Then the correct answer could be `$(window).click(function(){alert('test')})` and the you have a global click event – Zorken17 Apr 26 '19 at 10:41
No. if you write click for window object, then alter will be displayed where ever your click on screen. – Esakki s Apr 29 '19 at 05:20
But this is the code you wrote in you answer: `$("#test12").on("click", function () { alert("test"); });` That sets a `click-event` on the whole element with `id="test12"` and that is wrong. Check you code! – Zorken17 Apr 29 '19 at 09:06
Run your code or the snippet above and click on the text Material for example and you will see whats wrong. – Zorken17 Apr 29 '19 at 12:27

score 1 · Answer 2 · answered Apr 25 '19 at 11:30

1

When you use jQuery("#elemid") it selects only the first element with the given ID.

However, when you select by attribute (e.g. id in your case), it returns all matching elements, like so:

jQuery("[id=elemid]")

Credit and more info: https://stackoverflow.com/a/6744674/9083055

answered Apr 25 '19 at 11:30

lokarkristina

305
4
9

And some how possible for each button create separate allert – qunz666 Apr 25 '19 at 11:39

Zorken17 · Answer 3 · 2019-04-25T11:45:10.290

Try this, I have changed you button ID to class insted.

$(document).ready(function() {
  var mokData = [{
      category: "Material",
      id: '1',
      name: 'Brakedown of machine'
    },
    {
      category: "Material",
      id: '2',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '3',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '4',
      name: 'Brakedown of line'
    },
    {
      category: "Tool",
      id: '5',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '6',
      name: 'Brakedown of line'
    },
    {
      category: "Tool",
      id: '7',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '8',
      name: 'Brakedown of line'
    }
  ];

  $.each(mokData, function(i) {
    var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button class="alertButton">Start</button></article>';
    $('#test12').append(templateString);
  })

  $(".alertButton").on("click", function() {
    alert("test");
  });
})

.cards {
  margin: -1rem;
}

.card {
  width: 220px;
  float: left;
  margin: 1rem;
  border: 1px solid #d3d3d3;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
}

@supports (display: grid) {
  .cards {
    margin: 0;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<main class="cards">
  <div id="test12"></div>
</main>

JS jQuery loop for create HTML cards

3 Answers3