Проблема в том, что вы не можете передавать аргументы обработчикам событий jQuery так, как вы пытаетесь.
Вместо этого вам нужно прочитать атрибут data
из элемента, используя ссылку this
внутриclick
обработчик. Затем вы можете создать строку HTML, к которой вы присоедините это значение и предоставить его для вызова метода append()
. Попробуйте это:
jQuery(function($) {
$("button").click(function() {
var colorr = $(this).data('value1');
$("body").append('<div>' + colorr + ' item</div>');
});
});
div {
border: 1px solid black;
border-color: red;
width: 60px;
height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="2">
<button data-value1="yellow">Append list item</button>
<button data-value1="red">Append list item</button>
<button data-value1="blue">Append list item</button>
</td>
</tr>
</table>