Tại sao chức năng thay đổi jQuery không hoạt động sau khi tải html bằng AJAX?

Question

Tôi tải một biểu mẫu và tự động điền một lựa chọn qua AJAX từ một tệp PHP. Trước khi thực hiện chọn AJAX động, chức năng thay đổi của tôi hoạt động (nó chỉ hiển thị đầu vào khác khi người dùng chọn 'khác'). Bây giờ chức năng thay đổi không hoạt động.

Tôi biết chức năng sẵn sàng đang kích hoạt vì chức năng jStepper chạy. Tôi đã thử điều này với hàm thay đổi trong và ngoài hàm sẵn sàng. Tôi có một cảm giác chức năng thay đổi tải trước khi AJAX được hoàn thành, nhưng điều đó thực sự quan trọng?

var types = "<select name='ve_categoryNo' id='ve_categoryNo'>"; 
var d = new Date(); 
$.get('scripts/vehicle_category_feed.php?date=' + d.getTime(), function ($type) 
{ 
    $($type).find('type').each(function() 
    { 
     types += "<option value='" + $(this).attr("categoryno") + "'>" + $(this).attr("category") + "</option>"; 
    }); 
    types += "<option value='other'>Other(Specify)</option></select>"; 
    $('#ve_categoryNo_td').html(types); 
}); 
$(document).ready(function() 
{ 
    $('input[type=text]').click(function() 
    { 
     $(this).select(); 
    }); 
    $('#vehicle_entry').ajaxForm(function() 
    { 
     showMessage('vehicle_information_added'); 
    }); 
    $('#ve_ariNo').jStepper({minValue: 1, maxValue: 99999999}); 
    $('#ve_fleetNo').jStepper({minValue: 1, maxValue: 999999999}); 
    $('#ve_vehicleYear').jStepper(); 
    $('#ve_purchasePrice').jStepper({minValue: 0}); 
    $('#ve_categoryNo').change(function() 
    { 
     if ((this.value) == "other") 
     { 
      $('#otherCategory').show(); 
      $('#otherCategory input[type=text]').focus(); 
     } else 
     { 
      $('#otherCategory').hide(); 
     } 
    }); 
}); 

Answer 1

sửa đổi này:

$('#ve_categoryNo').change(function() { 

để

$(document).on('change', '#ve_categoryNo', function() { 

EDIT3: Điều này sẽ thực hiện tốt nhất sau khi một kiểm tra mã của bạn chặt chẽ hơn:

$('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() { 

vì nó liên kết gần nhất với phần tử được đề cập.

---

Bạn cũng nên đặt cuộc gọi ajax bên trong tập lệnh sẵn sàng mà tôi nghĩ.

Lý do điều này xảy ra là không có gì trong DOM liên kết với khi nó được khởi tạo. Sử dụng .on theo cách này liên kết nó với tài liệu thay thế. Nếu bạn có một phần tử "cố định" khác kết thúc tốt đẹp, thì có thể tốt hơn là liên kết với phần tử đó thay vì "tài liệu" vì nó có khả năng hoạt động tốt hơn.

EDIT: Lưu ý rằng bạn cũng có thể thêm quản lý sự kiện thay đổi sau khi bạn chèn phần tử như là một phần của hoàn thành cuộc gọi ajax, nhưng nếu bạn làm điều này nhiều lần, bạn nên hủy liên kết đầu tiên trong trường hợp đó.

EDIT2: kể từ khi có câu hỏi/ý kiến: TỪ GIẤY TỜ: http://api.jquery.com/on/

Gắn nhiều xử lý sự kiện giao gần phía trên cùng của cây tài liệu có thể làm suy giảm hiệu suất. Mỗi lần sự kiện xảy ra, jQuery phải so sánh tất cả các bộ chọn của tất cả các sự kiện được đính kèm thuộc loại đó với mọi thành phần trong đường dẫn từ mục tiêu sự kiện lên đến đầu tài liệu . Để có hiệu suất tốt nhất, hãy đính kèm các sự kiện được ủy quyền tại một tài liệu vị trí càng gần các yếu tố mục tiêu càng tốt. Tránh sử dụng quá nhiều sử dụng tài liệu hoặc tài liệu.body cho các sự kiện được ủy quyền trên tài liệu lớn .

Answer 2

Tôi nghĩ rằng yếu tố bạn đang gắn vào trong dòng:

$('#ve_categoryNo').change(function() { ... 

chưa tồn tại trong DOM, vì vậy sự kiện này không được ràng buộc.

Hãy thử sử dụng các chức năng .live:

$('#ve_categoryNo').live('change', function() { ... }); 

Hoặc hãy chắc chắn rằng phần tử DOM của bạn tồn tại trước khi bạn cố gắng để ràng buộc các sự kiện đối với họ.

Answer 3

Làm việc từ tài liệu đã sẵn sàng để thay đổi các công trình chức năng Ajax

$(document).change(function(){ 
    $("#next").click(function() { 
    var questionid = $('#question').val();   
    var assementid = $('#assement').val();   
    var userid  = $('#user').val();   
    if($('.ansradio').is(':checked')) { 
     var answer = $('input[name=ans]:checked', '#questionajax').val(); 
     $.ajax({ 
      type: "POST", 
      url: "answer/", 
      data: "q_id="+questionid+"&a_id="+assementid+"&answer="+answer+"&user_id="+userid, 
      success: function(html){ 
       $("#questionajax").html(html).show(); 
      } 
     }); 
    } 
    else{ 
     alert("Please answer the questions"); 
    }  
    }); 

});