Я пытаюсь получить форму для отображения результата уравнений, которые подключены к динамическим полям, но не могут получить созданные ранее поля для отображения ответа. Например, "footage2" должен быть подключен к (math.ceil(footage/7), чтобы дать postQuantity2, но ничего не отображается. Если кто-нибудь может объяснить, где я поступил не так, и как это сделать, я был бы очень благодарен! так много. Вот JSFiddle - http://jsfiddle.net/gv0029/EH4yb/, и вот
HTML:
<fieldset id="fence">
<div id="inputFence1" class="clonedInputFence">
<fieldset id="fenceDescripton">
<legend><strong>Fence Description</strong>
</legend>
<label>Footage:
<input type="number" id="footage" name="footage" value="" />
</label>
<select name="fenceHeight" id="fenceHeight">
<option value="select">Select Fence Height</option>
<option value="6" id="fH6">6 Ft.</option>
<option value="8" id="fH8">8 Ft.</option>
</select>
</fieldset>
<fieldset id="post">
<legend><strong>Post Type</strong>
</legend>
<label>Post Quantity:
<input type="postQuantity" name="postQuantity" id="postQuantity" value="" />
</label>
<select name="postMeasurements" id="postMeasurements">
<option value="select">Select Post Measurements</option>
<option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
<option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option>
</select>
</fieldset>
</div>
</fieldset>
<div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />
</div>
и JS:
//Quantity for Posts
$('#footage, #manualOverrideNo').bind('keypress keydown keyup change', function(){
var footage = parseFloat($(':input[name="footage"]').val(),10);
var total = '';
if(!isNaN(footage)){
total = Math.ceil(footage /7);
$(':input[name="postQuantity"]').val(total.toString());
} else {
$(':input[name="postQuantity"]').val("");
}
});
//Quantity for additional posts
$('#footage, #manualOverrideNo').bind('keypress keydown keyup change', function(){
var footage = parseFloat($(':input[name="footage"]').val(),10);
var total = '';
$field = $(event.target).closest(':input[name="footage"]'); // event.target is the element that first registered the event
index = $($field).data('index');
if(!isNaN(footage)){
total = Math.ceil(footage /7);
$(':input[name="postQuantity"][data-index="' + index + '"]').val(total.toString());
} else {
$(':input[name="postQuantity"]').val("");
}
});
//Dynamic Fence Input Fields
$('#btnAddFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it ID using newNum value
var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);
//Fieldset creation
newElem.find('fieldset').attr('id', 'fence' + newNum);
//Fence Description
newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
newElem.find(':input[name="footage"]').attr('id', 'footage' + newNum).attr('name', 'footage' + newNum);
//Post Type
newElem.find(':input[name="postQuantity"]').attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum);
newElem.find("select[name=postMeasurements]").attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum);
//Grouping by index
newElem.data('index', num);
// insert the new element after the last "duplicable" input field
$('#inputFence' + num).after(newElem);
// enable the "remove" button
//$('#btnDel').attr('disabled','');
$('#btnDelFence').removeAttr('disabled');
});
$('#btnDelFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
$('#inputFence' + num).remove(); // remove the last element
// enable the "add" button
//$('#btnAdd').attr('disabled','');
$('#btnAddFence').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDelFence').attr('disabled','disabled');
});
$('#btnDelFence').attr('disabled','disabled');
Насколько я знаю, привязка будет работать только для элементов, которые присутствуют в то время, когда вы вызываете ее, чтобы вы могли либо обернуть свой метод привязки в функцию и вызвать ее при создании элементов, либо использовать jquery.on
для привязки к созданным элементам динамически:
$(document).on('keypress keydown keyup change','#footage, #manualOverrideNo',
function(){ .....
Вопрос, который я изложил, все еще стоит, но, глядя на вашу скрипку, у вас есть еще одна проблема.
второй '#footage'
имеет идентификатор #footage2
и вы не привязываетесь к нему.
установите id просто 2
и имя класса в manualOverrideNo
попытка
$(document).on('keyup','.manualOverrideNo',function(){
var id = $(this).attr('id');
var manualOverrideNo = $('#'+id).val();
});
теперь вы имеете правильное значение и можете что-то с этим сделать
.on()
является правильным. Обратите внимание, что вы также можете привязать идентификатор элемента с помощью «начинается с», например,$(document).on('keyup', '[id^=footage]', function() {//stuff});
Молодец Андрей. Пожалуйста, не забудьте поднять / принять ответ Эндрю, когда будете готовы закрыть вопрос.