在动态子级TextBox上进行KeyUp时自动在动态父级上计算并显示结果

Question

这仍然与动态父级和动态子级有关，我的问题是在键入功能时自动进行计算。

在上一个问题中可以找到的所有脚本

我还已经在每个div上添加了类并进行了输入，以使其更好地作为建议。

<div id="divexpeses" **class="expenses"** style="margin-left:25px;background-color:antiquewhite">
    <label style="float:left; margin-right:100px;">Expenses</label><label>Amount</label>
    <ul>
      <li>
        Advance
        <input type="text" name="txtpetrol[]" class="field1" value="90" />
      </li>
      <li>
        Pay Trip
        <input type="text" name="txtticket[]" class="field1" value="90" />
      </li>
    </ul>
  </div>

现在。 让我展示我实际需要自动执行的函数，并在父div上相应地显示它：

$(".purchase-item").keyup('.field1', function (index, value) {
                alert("hai");
                // get current index position of the div
                var itemIndex = $(this).parents('expenses').children('.field1').index($(this).parent('.field1'));
                alert(itemIndex);
            });

您必须记住，这是充满活力的父母和充满活力的孩子！

每次我在txtpetrol [] txtticket []结果上插入值时，首先要确定哪个父级索引和div费用。 然后它应该显示如下：

Expenses       Amount   -- to -->     Expenses      Amount: 180

任何想法如何克服这个问题？ 我需要帮助。

预先感谢您阅读和回答我的问题。

Answer 1

document中元素的id应该是唯一的。 从.expenses元素中删除重复的id ，使用事件委托和.index()确定哪个.expenses元素触发了keyup事件

 $(document).on("keyup", ".expenses", function(event) { console.log(".expenses index:", $(this).index(".expenses") , "event target:", event.target); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="expenses" style="margin-left:25px;background-color:antiquewhite"> <label style="float:left; margin-right:100px;">Expenses</label> <label>Amount</label> <ul> <li> Advance <input type="text" name="txtpetrol[]" class="field1" value="90" /> </li> <li> Pay Trip <input type="text" name="txtticket[]" class="field1" value="90" /> </li> </ul> </div> <div class="expenses" style="margin-left:25px;background-color:antiquewhite"> <label style="float:left; margin-right:100px;">Expenses</label> <label>Amount</label> <ul> <li> Advance <input type="text" name="txtpetrol[]" class="field1" value="90" /> </li> <li> Pay Trip <input type="text" name="txtticket[]" class="field1" value="90" /> </li> </ul> </div> <div class="expenses" style="margin-left:25px;background-color:antiquewhite"> <label style="float:left; margin-right:100px;">Expenses</label> <label>Amount</label> <ul> <li> Advance <input type="text" name="txtpetrol[]" class="field1" value="90" /> </li> <li> Pay Trip <input type="text" name="txtticket[]" class="field1" value="90" /> </li> </ul> </div> 

Answer 2

首先，我必须对@ guest271314表示感谢，在此向其展示代码，我对此表示感谢。 我尝试采用它，但是它不适合我的情况，我一直认为它应该比这更简单。

在我睡觉之前，我只是尝试像下面这样的语法，我得到了我想要的：-

$(".purchase-items").keyup('.expenses', function (index, value) {
                // get current index position of the div
                dt2 = 0;
                var itemIndex = $(this).index();
                alert(itemIndex);
                //var items = $(".expenses").index(); //current div expenses
                //find input(.field2) inside div(.expenses) as parent
                $(this).find('.field2').each(function(){
                    var innerDivId = $(this).val();
                    if (innerDivId == '') { innerDivId = "0" };
                    //do calculation
                    dt2 = (Number(dt2) + Number(innerDivId));
                    alert(innerDivId);
                });
            });

我不确定为什么它可行，对基于div的所有输入求和并显示正确的结果，因为我在jquery函数上非常新。