只有第一个输入字段由 JQuery 函数自动填写

Question

当用户在素材字段中输入信息时，我正在尝试获取一个表单来自动填写输入，然后应该将这些信息插入到带有 JQuery 的方程中，然后答案应该在 postQuantity 中输出。由于用户可以添加输入，因此表单设置为每个素材都应带有相应的 postQuantity，该 postQuantity 由其后缀编号表示。因此，应该使用 Footage2 来查找 postQuantity2 和 3 for 3，依此类推。问题是只有第一个字段会自动填充，并且任何时候更改不同的素材类别都不会发生任何事情。任何关于我哪里出错的见解以及如何解决它的建议将不胜感激！谢谢！这是一个 JSFiddle - http://jsfiddle.net/gv0029/TwH5n/

HTML：

    <form>
<fieldset id="fence">
    <div class="inputFence">
        <fieldset class="fenceDescripton">

            <legend><strong>Fence Description</strong></legend>
            <label>Footage<input name="footage_1" class="footage" /></label>
            <select name="fenceHeight_1" class="fenceHeight">
                <!--got rid of "select" from the value. not needed at all-->
                <option value="">Select Fence Height</option>
                <!--got rid of the ids completely. the numbers from the values are all you need-->
                <option value="6">6 Ft.</option>
                <option value="8">8 Ft.</option>
            </select>
        </fieldset>
        <fieldset class="post">
            <legend><strong>Post Type</strong>

            </legend>
            <label>Post Quantity:
                <input type="postQuantity" name="postQuantity_1" class="postQuantity" value="" />
            </label>
            <select name="postMeasurements_1" class="postMeasurements">
                <option value="">Select Post Measurements</option>
                <option value="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
                <option value="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>


    </form>

JS：

//Quantity for Posts
    $("[class^='footage']").bind('keypress keydown keyup change', function(){
            var footage = parseFloat($(this).val(),10);
            var total = '';         
            var parts = $(this).attr('name').split("_");
            var fenceNumber = parts[1];

            if(!isNaN(footage)){
                total = Math.ceil(footage /7);
                $(":input[name='postQuantity_" + fenceNumber + "'" + ']').val(total.toString());
            } else {
                $(":input[name='postQuantity_" + fenceNumber + "'" + ']').val("");
            }
        });

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {

    // create the new element via clone()
    var newElem = $('.inputFence:last').clone();

    // insert the new element after the last "duplicable" input field
    $('.inputFence:last').after(newElem);

    // enable the "remove" button
    $('#btnDelFence').removeAttr('disabled');

    //get the input name and split into array (assuming your clone is always last)
    var parts = $('.fenceHeight:last').attr('name').split("_");
    //change the second element of the array to be one higher
    parts[1]++;
    //join back into a string and apply to the new element
    $('.fenceHeight:last').attr('name', parts.join("_"));

    //do the same for other two inputs
    parts = $('.postQuantity:last').attr('name').split("_");
    parts[1]++;
    $('.postQuantity:last').attr('name', parts.join("_"));

    parts = $('.postMeasurements:last').attr('name').split("_");
    parts[1]++;
    $('.postMeasurements:last').attr('name', parts.join("_"));

    parts = $('.footage:last').attr('name').split("_");
    parts[1]++;
    $('.footage:last').attr('name', parts.join("_"));


    // business rule: you can only add 5 names
    //if (newNum == 5)
    //$('#btnAdd').attr('disabled','disabled');
});

$('#btnDelFence').click(function () {
    //remove the last inputFence
    $('.inputFence:last').remove();

    // if only one element remains, disable the "remove" button
    if ($('.inputFence').length == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

Answer 1

我想你想要这样的东西：

http://jsfiddle.net/TwH5n/3/

我更改的行是：

$(document.body).on('keydown', '[class^="footage"]'

这会将事件绑定到所有未来的 '[class^="footage"]' 元素

理想情况下，您不会在身体上这样做，因为它效率不高。找到更接近的父级，或在创建时将事件附加到每个克隆。

Answer 2

jsfiddle 错了

无论如何，您正在使用 .bind 方法，该方法将事件处理程序绑定到当前存在的元素。您可以使用适用于选择器而不是元素的 .live 方法，但这在 1.7 版本中已弃用，并在 1.9 中删除

截至http://api.jquery.com/bind/

更灵活的事件绑定见事件讨论 .on() 或 .delegate() 中的委托。

希望对你有帮助

附：正确的例子，没有使用过时的方法

$('form').on('keypress keydown keyup change',"[class^='footage']", function(){});

http://jsfiddle.net/TwH5n/7/