新元素創建，調用jQuery的方法，準備好文件後，無法正常工作

Question

我有以下代碼

$(document).ready(function() { 

// When change the value in select it will send id to controller in order to return the price of service. 
$(".select-service").change(function(){ 
    var element_id = $(this).attr('id'); 
    $.post("/services/get_price_of", { 
     message: this.value 
    }, 
    function(data){ 
     $("#" + element_id).parent().find(".price-input").val(data); 

    }) 
}); 

}); 

頁面加載一個選擇，但我可以添加更多的動態選擇。問題是，對於所有選擇動態添加，事件提前不起作用。 有人可以幫我嗎？

問候。

P.D：對不起，我的英語不好。

Answer 1

使用jQuery on

http://api.jquery.com/on/

$(document).ready(function() { 

    $("select").on("change", ".select-service", function(event){ 
     var element_id = $(this).attr('id'); 
     $.post("/services/get_price_of", { 
      message: this.value 
     }, 
     function(data){ 
      $("#" + element_id).parent().find(".price-input").val(data); 

     }) 
    }); 
}); 

在jQuery 1.7中，.live（）方法已過時

Answer 2

您可以使用使用on()及其selector參數事件委託。例如，以捕獲所有點擊次數p元素#container（事件偵聽器連接後添加甚至p元素），你可以使用此代碼：

$("#container").on('click', 'p', function() { 
    $(this).css('color', 'red'); 
}); 

此外，儘管不相關的問題，更優雅使用回調中的事件目標的方法是：

var self = $(this); 
someFunction(function() { 
    self.css('color', 'red'); 
});