使用 JQuery 将动态输入插入方程

Question

我正在尝试获取一个表单来显示插入了动态字段但无法获得新创建的字段来显示答案的方程的结果。例如，应该将“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'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 并将类名设置为 manualOverrideNo

试一试

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

现在你有了正确的价值，可以用它做点什么