為什么jQuery類不適用於從AJAX響應生成的HTML元素？

Question

我的網站使用的是PHP，jQuery，Smarty等。 我有一個HTML表單。 在此表單中，有一個選擇控件和幾個日歷控件。 一些類被添加到這些控件中以實現某些javascript功能。 第一次加載表單時，應用於這些控件的類將起作用，但是當我將相同的控件附加至具有相同類的控件時，javascript功能將無法正常工作。 為什么會發生這種情況，以及如何解決此問題？ 供您參考，我在下面的幾小段代碼中：HTML代碼：

<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="{$data.rebate_start_date}">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="{$data.rebate_expiry_date}">
<select class="states" multiple="multiple" name="applicable_states[1]" id="applicable_states_1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
</select>

來自PHP文件的AJAX響應如下：

$rebate_no = $_POST['rebate_no'];
 $states = '';
      foreach ($state_list as $key => $value) {
        $states .= "<option value=".$value['id'].">".$value['state_name']."</option>";
      }
<input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_start_date[$rebate_no]' id='rebate_start_date_$rebate_no' value=''>
<input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_expiry_date[$rebate_no]' id='rebate_expiry_date_$rebate_no' value=''>
<select class='states' multiple='multiple' name='applicable_states[$reabate_no]' id='applicable_states_$reabate_no'>
                    $states    
                    </select>

實際代碼非常大。 我只放入了代碼的一小部分和必要的部分。 您能在這方面幫助我嗎？ 提前致謝。 jQUery AJAX功能代碼如下：

$(function() {
  $(".add_new_rebate").on("click", function(event) {
    event.preventDefault();
    var manufacturer_id =  $("#company_id").val();

    /*if($.active > 0) { //or $.active      
      request_inprogress();
    } else {*/  
      var next_rebate_no = $('.rebate_block').length + 1;
      var rebate_no      = $('.rebate_block').length + 1;

    if ($('.rebate_block').length>0) { 
      rebate_no = rebate_no+1;
    }

      $('.add_new_rebate').attr('disabled','disabled');
    //}

    $.ajax({
      type: "POST",
      url: "add_rebate_by_product.php",
      data: {'request_type':'ajax', 'op':'create_rebate', 'next_rebate_no':next_rebate_no, 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
      beforeSend: function() { 
        $('.table-responsive').after("<img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'>");
      },
      success: function(data) {
        if(jQuery.trim(data)=="session_time_out") {
        window.location.href = site_url+'admin/login.php?timeout=1';                
        } else {
          $('.rebate_block').append(data);
          $('.add_new_rebate').removeAttr('disabled');
        }
        $('.load').remove();
      }
    });    
 });   
});

Answer 1

因為jQuery僅解析加載的DOM，所以它無法處理某些內容，在jQuery處理完之后添加到DOM中。 看一下jQuery API中的“ on”函數

Answer 2

如果jquery> 1.7，則必須添加.on

$('#parent-selector').on('click', 'child-selector', funcion(){})

子選擇器是剛剛添加的選擇器。 您需要以這種風格添加add事件，以便在頁面上動態添加的新元素直到jquery 1.7都可以.live('click')

Answer 3

就像其他人提到的那樣，當您在當前元素上使用jquery處理程序時，它們可以正常工作，但是新元素未綁定到這些處理程序，這就是我們需要使用.on（）方法的原因。

因此，對於新創建的元素，我們將附加一個click事件處理程序或與此相關的任何事件，例如：

.states ：

$(document).on('change','.states',function(){ 
  //on change of select 
});

.date_control ：

$(document).on('click','.date_control',function(){ 
 //on click of input .date_control 
});

DEMO

Answer 4

我也有這個問題，但是我找到了答案。

就像我可以讓Kittenz說的那樣。 您的.on（）函數可以解決問題。

在jQuery的網站在這里

事件處理程序僅綁定到當前選定的元素； 當您的代碼調用.on（）時，它們必須存在於頁面上。 為了確保元素存在並可以選擇，請在文檔就緒處理程序內對頁面上HTML標記中的元素執行事件綁定。 如果將新HTML注入到頁面中，請在將新HTML放入頁面后選擇元素並附加事件處理程序。 或者，使用委托事件來附加事件處理程序，如下所述。

這意味着，如果要調用ajax代碼（加載代碼時不存在的事件處理程序），則需要將其綁定到存在的元素。

這是一個例子：

$( "body" ).on( "click", "p", function() {
    alert( $( this ).text() );
});

您也可以在上面的鏈接中看到它。 在那里顯示了它是如何工作的。