爲什麼在用AJAX加載html之後沒有jQuery更改函數？

我加載了一個表單並通過AJAX從PHP文件動態填充選擇。在實現動態AJAX填充選擇之前，我的更改功能起作用（當用戶選擇「其他」時，它只顯示另一個輸入）。現在更改功能不起作用。爲什麼在用AJAX加載html之後沒有jQuery更改函數？

我知道ready函數正在觸發，因爲jStepper函數運行。我已經嘗試過在ready函數內外使用change函數。我有一種感覺，在AJAX獲取完成之前加載了更改函數，但這確實很重要嗎？

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

來源

2012-03-29 ahhchuu

[動態創建的元素上的事件綁定？]的可能重複（http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements） – showdev 2016-07-05 22:27:58

修改此：

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

到

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

EDIT3：

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

，因爲它：這將你的代碼的檢查更加緊密地之後表現最好綁定最接近有問題的元素。

你也應該把ajax調用放到我想的ready腳本中。

發生這種情況的原因是DOM實例化時沒有任何內容綁定到它。以這種方式使用.on將它綁定到文檔。如果你有另外一個包含它的「固定」元素，那麼可能會更好地綁定到使用它來代替「文檔」，因爲它可能會更好。

編輯：請注意，您也可以在將元素注入爲ajax調用完成的一部分之後添加更改事件管理，但是如果多次執行此操作，則應首先解除綁定。

EDIT2：既然有問題/評論：從文檔：http://api.jquery.com/on/

附加多個授權的事件處理程序附近的文檔樹的頂部可能會降低性能。每次事件發生時，jQuery必須將該類型的所有附加事件的所有選擇器與從事件目標到文檔頂部的路徑中的每個元素進行比較。爲獲得最佳性能，請將文檔位置的委派事件附加到儘可能靠近目標元素的位置。避免過度使用文檔或document.body來處理大型文檔上的委派事件。

來源

2012-03-29 16:37:21

是的！輝煌，你修好了。你能解釋一下爲什麼它是一種方式而不是另一種方式？ – ahhchuu 2012-03-29 16:38:33

增加了一個註釋來澄清原因。 – 2012-03-29 16:42:38

要小心有多少物品綁定到$（文檔） - 它是一個更好的做法，儘可能接近選擇器綁定到一個元素（當然不會被DOM修改取代）雖然很好的答案。 – mikevoermans 2012-03-29 16:44:26

我認爲你是在該行結合的元素：

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

還不在DOM存在，所以事件沒有得到約束。

嘗試使用.live功能：

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

，或者確保您嘗試將事件綁定到它們之前存在於您的DOM元素。

來源

2012-03-29 16:43:02

'.on（'語法比'.live'更受歡迎（'並且性能會更好，尤其是如果綁定在更接近元素的地方 – 2012-03-29 16:47:53

謝謝，我做了不知道那 – 2012-03-29 16:50:39

看到我的答案的最新的例子，以更緊密的綁定以及關於性能的一些註釋。活的總是綁定到文檔是我的理解。 – 2012-03-29 17:42:33

-1

從文件準備改變任職工作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"); 
    }  
    });

}）;

來源

2017-05-18 11:17:09

爲什麼在用AJAX加載html之後沒有jQuery更改函數？

回答

相關問題