Включение динамических входов в уравнения с JQuery

0

Я пытаюсь получить форму для отображения результата уравнений, которые подключены к динамическим полям, но не могут получить созданные ранее поля для отображения ответа. Например, "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 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');  
Теги:
forms
dynamic

1 ответ

2
Лучший ответ

Насколько я знаю, привязка будет работать только для элементов, которые присутствуют в то время, когда вы вызываете ее, чтобы вы могли либо обернуть свой метод привязки в функцию и вызвать ее при создании элементов, либо использовать jquery.on для привязки к созданным элементам динамически:

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

Вопрос, который я изложил, все еще стоит, но, глядя на вашу скрипку, у вас есть еще одна проблема.

второй '#footage' имеет идентификатор #footage2 и вы не привязываетесь к нему.

установите id просто 2 и имя класса в manualOverrideNo

попытка

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

теперь вы имеете правильное значение и можете что-то с этим сделать

  • 0
    Пробовал, но это не сработало. Спасибо хоть!
  • 1
    @ gv0029 Эндрю прав, что вы больше не привязаны к элементу, как только вы обновите идентификатор (что вы должны сделать, так как у вас не может быть повторяющихся идентификаторов). Его решение связывания по имени класса с использованием .on() является правильным. Обратите внимание, что вы также можете привязать идентификатор элемента с помощью «начинается с», например, $(document).on('keyup', '[id^=footage]', function() {//stuff}); Молодец Андрей. Пожалуйста, не забудьте поднять / принять ответ Эндрю, когда будете готовы закрыть вопрос.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню