이 코드 를 작성했지만 제거 버튼이 작동하지 않습니다. 그리고 콘솔에 오류가 없습니다 ..
var counter = 0;
var dataList = document.getElementById('materials');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}, {
"product": "44444",
"description": "description 4"
}, {
"product": "55555",
"description": "description 5"
}];
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item.description;
option.text = item.description;
option.setAttribute('data-product', item.product);
dataList.appendChild(option);
});
$('#bookForm')
// Add button click handler
.on('change', 'input[id^="ajax"]', function() {
var description = $(this).val();
var product = $('#dataList > option[value="' + description + '"]').data('product');
$('input[name=product-'+ $(this).attr("name").replace("description-", "") + ']').val(product);
});
$('#bookForm')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="description"]').attr('name', 'description-' + counter).end()
.find('[name="product"]').attr('name', 'product-' + counter).end();
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove element containing the fields
$row.remove();
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div id="bookForm" class="form-group">
<label for="inputName" class="col-md-2 col-sm-2 control-label">Υλικό / Ποσότητα</label>
<div class="col-md-3 col-sm-3">
<input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description-0">
<datalist id="materials"></datalist>
</div>
<div class="col-md-3 col-sm-3">
<input type="number" class="form-control" name="product-0" placeholder="Ποσότητα" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div id="bookTemplate" class="form-group hide">
<div class="col-md-3 col-sm-3 col-md-offset-2 col-sm-offset-2">
<input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description">
<datalist id="materials"></datalist>
</div>
<div class="col-md-3 col-sm-3">
<input type="number" class="form-control" name="product" placeholder="Ποσότητα" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>probelm은 .removeButton내부 에서 클래스 를 선택하는 #bookForm것이지만 실제로 .removeButton는 외부입니다.#bookForm
$('#bookForm')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="description"]').attr('name', 'description-' + counter).end()
.find('[name="product"]').attr('name', 'product-' + counter).end();
});
// Remove button click handler
$("#bookForm").parent().on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove element containing the fields
$row.remove();
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다