Cześć,
Mam problem aby pobrać value z elementów zawartych w select. Generalnie mechanizm działa na pobieranie z elemetów html napisanych na sztywno w pliku(Pole select wstawione poglądowe). Problem jest z pobraniem elementów które są dodawane za pomocą funkcji w skrypcie napisanym obiektowy i z użyciem jQuery. Klasa zawarta w kodzie tworzy obiekt, w którym umieszczane jest pole select.
Poniżej wstawiam fragmenty html-a oraz skryptu:
<body>
<!-- Pole select wstawione poglądowe -->
<div class="custom-select" style="width:200px;">
<select id="list">
<option value="0">Wybierz kolor:</option>
<option value="1">Szary</option>
<option value="2">Zielony</option>
<option value="3">Niebieski</option>
</select>
</div>
<div id="board" class="board">
<h1 class="board-title"> Tablica</h1>
<button class="create-column"> Dodaj kolumnę</button>
<div class="column-container"></div>
</div>
</body>
</html>
$(function() {
// KLASA COLUMN
class Column {
constructor(name,color){
var self = this;
this.id = randomString();
this.name = name || 'Draft';
this.color = color || 'gray';
this.$element = createColumn();
function createColumn() {
// Tworzenie elementów składowych kolumny
var $column = $('<div class="column"></div>');
$column.addClass( 'column--' + self.color );
var $columnTitle = $('<h2 class="column-title">' + self.name.toUpperCase() + '</h2>');
var $columnCardList = $('<ul class="column-card-list"></ul>');
var $columnDelete = $('<button class="column-btn-delete">x</button>');
var $columnAddCard = $('<a class="add-card">Dodaj kartę </a>');
var $btnAddCard = $('<button class="btn-add">+</button>');
// zmienna zawierająca element select
var $checkbox = $('<div class="custom-select" style="width:200px;"> <select id="list"> <option value="0">Wybierz kolor:</option> <option value="1">Szary</option><option value="2">Zielony</option> <option value="3">Niebieski</option></select> </div>');
//PODPINANIE ZDARZEŃ
//Delete column after click
$columnDelete.click(function(){
self.removeColumn()
})
//Add card after click
$btnAddCard.click(function(){
self.addCard(new Card(prompt("Wpisz nazwę karty")))
})
//Konstruowanie elementu kolumny
$column.append($columnTitle)
.append($checkbox)
.append($columnDelete)
.append($columnAddCard)
.append($btnAddCard)
.append($columnCardList)
;
// FUNKCJA pobierająca value
$('#list').change(function(){
var getval = $(this).val();
console.log(getval);
}) ;
//Zwracanie stworzonej kolumny
return $column;
}
}
addCard(card) {
this.$element.children('ul').append(card.$element);
}
removeColumn() {
this.$element.remove();
}
}
Staram się pobrać value FUNKCJĄ pobierająca value, ale tak jak wspomniałem działa ona tylko na sztywny html, a nie na elementy tworzone zmienną $checkbox.
Będę wdzięczny za poradę.