入力セレクタで入力セレクタが機能しない

Question

総計ボタンをクリックするとテーブルを読み込もうとしていますが、ボタンはajaxコールでテーブルに作成されます。id属性と入力型セレクタの両方で試しましたが、ボタンを読み取るために、私はjavascript関数が呼び出されたクリックボタンにJavaScript関数を呼び出すようにしようとしたとき、誰もがこれを説明することができますし、どのように私はjQueryのセレクタに送信ボタン以来

$.ajax({ 
     type:'POST',  
     url:'/pos/addproduct', 
     dataType: "json", 
     data:JSON.stringify(order), 
     contentType: "application/json; charset=utf-8", 
     success: 
      function(data){ 
      i++; 
      console.log(i); 
      $.each(data,function(index,value){ 
       var temp = "qty" + data[index].barcodeid.trim(); 
       var qtyitm=$("#"+temp); 

       if(qtyitm.length != 0){ 
        qtyitm.html(data[index].qty); 
        //("#price"+(data[index].barcodeid.trim())).html(data[index].price); 
        temp = "price" + data[index].barcodeid.trim(); 
        qtyitm = $("#"+temp); 
        qtyitm.html(data[index].price); 
       } 
       else{ 
        var row=$("<tr><td>"+data[index].oid+"</td>"+"<td>"+data[index].pname.trim()+ 
          "</td>"+ 
          "<td id=\"qty"+data[index].barcodeid.trim()+"\">"+data[index].qty+"</td>"+ 
          "<td id=\"price"+data[index].barcodeid.trim()+"\">"+data[index].price+"</td>"+ 
          "<td>" 
          +data[index].barcodeid.trim()+"</td></tr>" 

        ); 
        $("#firstrow").after(row).removeClass("hidden"); 
        } 

      }) 
      if(i==1){ 
      var row1=$("<tr><td>"+'<input type="submit" id="calculateTotal" value="Total">'+"</td></tr>"); 
      $("#order tbody").append(row1); 
      } 
     } 

}) 
}); 
$('input[id="calculateTotal"]').click(function(event){ 
    alert("hello"); 
}) 

Answer 1

を使用してお読みください#calculateTotalは、jsコードを介して動的に追加されました：

$("<tr><td>"+'<input type="submit" id="calculateTotal" value="Total">'+"</td></tr>"); 

あなたはのように、それにclickイベントをアタッチするイベント委任on()を使用する必要があります。

$('body').on('click', 'input[id="calculateTotal"]', function(event){ 
    alert("hello"); 
}) 

は、この情報がお役に立てば幸いです。

Answer 2

ブラウザは、ページが読み込まれたときにJavaScriptコードを解析し、最初の読み込み時にDOMリスナーにイベントリスナーをアタッチします（この場合、ボタンは既存のDOMツリーに単純にアタッチするので終了しません）

ソリューションは、あなたのコードでそう$('document').on('event','selector','callback')を使用している：

var row1=$("<tr><td>"+'<input type="submit" id="calculateTotal" value="Total">'+"</td></tr>"); 
      $("#order tbody").append(row1); 

とJSで：

$('document').on('click','#calculateTotal',function(){ //do your stuff here });

希望するもの：D