ID選擇器不適用於輸入類型提交

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>");

您應該使用事件委托on()將click事件附加到它，例如：

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