Question

我正在尝试使用表单在用户在素材字段中输入信息时自动填写输入，然后应将其插入到JQuery的等式中，然后应在postQuantity中输出答案。由于用户可以添加输入，因此表单将被设置为每个素材应与其后缀编号所表示的相应的postQuantity一起使用。所以应该使用videos2来查找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

jsfiddle错了

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

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

有关更灵活的事件绑定，请参阅事件讨论授权在.on（）或.delegate（）。

希望这有帮助

P.S。没有使用弃用方法的正确示例

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

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

Answer 2

我想你想要这样的事情：

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

我更改的行是：

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

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

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

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

2 个答案: