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，将类名设置为manualOverrideNo

尝试

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

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

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

1 个答案: