JQuery добавить общую сумму не происходит с динамически созданным контентом

Question

JQuery добавить общую сумму не происходит с динамически созданным контентом

0

У меня есть форма, и когда я ввожу число и "keyup", он должен отображать общее количество. Однако до тех пор, пока форма статична, она работает нормально, но если динамически сгенерировано, она не работает.

Я добавил ссылку js fiddle, Любая помощь, которую оценили

JSFiddle

<form class="order-form">
<div class="product-lines">
    <!-- Product Line Section -->
    <div class="product-line">  <a href="#" alt="close" class="btn-close" title="Remove"><img alt="remove" src="img/close.png" /></a>

        <input class="input-text" name="product-code" type="text" placeholder="Product Code"></input>
        <input class="input-text" name="product-quantity" type="text" placeholder="Quantity"></input>
        <input class="input-text" name="product-discript" type="text" placeholder="Discription of Product" disabled></input>
        <label class="label-sign">&pound;</label>
        <input class="input-text" name="product-price" type="text" placeholder="RRP Price"></input>
        <br>
    </div>
</div>
<p>Line below dynamically generated</p>
<div class="product-lines">
    <!-- Product Line Section -->
    <div class="product-line">  <a href="#" alt="close" class="btn-close" title="Remove"><img alt="remove" src="img/close.png" /></a>

        <input class="input-text" name="product-code" type="text" placeholder="Product Code"></input>
        <input class="input-text" name="product-quantity" type="text" placeholder="Quantity"></input>
        <input class="input-text" name="product-discript" type="text" placeholder="Discription of Product" disabled></input>
        <label class="label-sign">&pound;</label>
        <input class="input-text" name="product-price" type="text" placeholder="RRP Price"></input>
        <br>
    </div>
</div>
<br>
<div id="product-btn">
    <input name="btn-add-line" type="button" value="Add new line"></input>
    <input id="btn-update" name="btn-update" type="button" value="Update"></input>
    <!-- Clear All Button -->
    <input id="btn-removeAll" name="btn-removeAll" type="reset" value="Remove All"></input>
    <input name="btn-submit" type="submit" value="Submit Order"></input>
    <label class="label-sign">&pound;</label>
    <input class="input-text" name="order-total" type="text" placeholder="Order total" disabled></input>
</div>

Мой код

var productLines = $("div.product-lines"),
    productLine = $("div.product-line"),
    productPrice = $("input[name=product-price]"),
    productCode = $("input[name=product-code]"),
    productQuan = $("input[name=product-quantity]"),
    updateTotal = $("input#btn-update"),
    orderTotal = $("input[name=order-total]");



$(productLines).on("keyup", function (event) {

    var sum = 0;

    $(productPrice).each(function () {

        sum += Number($(this).val());

    });

    $(orderTotal).val(sum);


});

Я новичок в JS.

Zinox 01 май 2014, в 15:28

Источник

Теги:

javascript

jquery

forms

dynamically-generated

3 ответа

Ещё вопросы

James Donnelly · Answer 1 · 2014-05-01T10-35-00.000Z

Делегируйте событие в элемент с более высоким значением. Например, если ваш элемент form обернут внутри элемента section, вы можете вместо этого использовать:

$('section').on('keyup', 'div.product-lines', function(event) {
    ...
});

См. Документацию о делегировании событий для получения подробной информации о том, как делегирование работает в jQuery.

Также input элементы самозакрываются. <input...></input> недействителен и должен быть заменен на <input.../>.

Спасибо! Я просто удаляю теги </ input> и проверяю код, проверю и сообщу.
Я попробовал свой случай $ (". Content"). On (...), а также, как Джеймс Даффи предложил $ (document) .on (...), но он по-прежнему не получается. Выводит только первую строку. Помощь наиболее ценится.
@Zinox , попробуйте вызвать keyup события на input самих элементах. В настоящее время вы вызываете его для элемента div , а элементы div не имеют атрибута value .
Вы имеете в виду, как это? <input onkeyup = "myFunction ()" />

James Duffy · Answer 2 · 2014-05-01T11-14-00.000Z

Чтобы связать события с динамически вставленными элементами, попробуйте:

$(document).on("keyup", "div.product-lines", function (event) {

Этот синтаксис связывает прослушиватель событий с самим документом, тогда как $(productLines).on("keyup", function (event) { только привязывается к элементам, которые в настоящее время существуют на странице при $(productLines).on("keyup", function (event) { этой строки кода.

McCheeseIt · Answer 3 · 2014-05-01T10-56-00.000Z

0

После создания новой строки вам необходимо обновить productPrice var.

productPrice = $("input[name=product-price]")

McCheeseIt 01 май 2014, в 10:56

0

@MCCheeselt Как мне это сделать? Извините, я новичок в JS.
Zinox 01 май 2014, в 13:31
0

Вы можете запустить приведенный выше код. при загрузке страницы, если у вас есть 2 поля product-price, ваш productPrice будет содержать 2 позиции. Если вы динамически добавляете другое поле product-price, ваш var productPrice будет по-прежнему иметь 2 элемента и не будет содержать вновь добавленный элемент. имеет смысл?
McCheeseIt 01 май 2014, в 13:53
0

@MCCheeselt У меня есть такая переменная вверху после загрузки документа, однако она по-прежнему занимает только первую строку и не складывается.
Zinox 01 май 2014, в 13:57

Показать ещё 1 комментарий