動的な子のTextUp上のKeyUpを自動的に計算し、結果を表示する

Question

これは、動的な親子および動的な子に関係しています。

あなたは私もすでに提案として、それを改善するために、それぞれのdivと入力にクラスを追加my previous question

で見つけることができるすべてのスクリプト。

<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> 

Now。私は実際に私が自動的に計算しないと、親の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 []結果に値を挿入するたびに、親インデックスと費用を最初に決定してください。次に、以下のように表示されます： -

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

この問題をどのように克服できますか？私は助けてください。

私の質問を読んで返信してくれてありがとう。

Answer 1

は、第一に、私はそれをコードを表示し、私は感謝@ guest271314に感謝を言わなければならないkeyupイベントをトリガしたかを決定します。私はそれを採用しようとしていますが、私の状況には適していません。

私はちょうど下記のように、この構文をしようと私は私が欲しいものだ寝る前に： - 私はので、私はわからない、なぜベースのdivにそれが実行可能な、合計のすべての入力を

$(".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); 
       }); 
      }); 

をし、正しい結果を表示jquery関数で非常に新しい。

Answer 2

iddocumentの要素は一意である必要があります。 、.expenses要素から重複id Sを削除したイベントの委任を使用して.index()は.expenses要素が

$(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>