使用JQuery將動態輸入插入方程式

Question

我正在嘗試獲取一個表單來顯示已插入動態字段但無法獲取新創建的字段以顯示答案的方程式的結果。 例如，“footage2”應該插入到（math.ceil（素材/ 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's 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');  

Answer 1

據我所知，bind只適用於你調用它時出現的元素，所以你可以將bind方法包裝在一個函數中，並在創建元素時調用它，或者使用jquery.on綁定到創建的元素動態地像：

 $(document).on('keypress keydown keyup change','#footage, #manualOverrideNo',
        function(){ .....

我概述的問題仍然存在，但看着你的小提琴，你有另一個問題。

第二個'#footage'的id為#footage2 ，你沒有綁定。

將id設置為2 ，將classname設置為manualOverrideNo

嘗試

  $(document).on('keyup','.manualOverrideNo',function(){
      var id = $(this).attr('id');
      var manualOverrideNo = $('#'+id).val();
  });

現在你有正確的價值，可以用它做點什么