Jquery獲取AJAX加載元素的值

Question

我有一個帶有2個選擇框的頁面，其中一個通過AJAX調用加載。然後我想在啓用提交按鈕之前用jQuery驗證元素。當我更改靜態選擇（strDirectorate）時，jquery可以正常工作，但當我更改由AJAX（new_cc）加載的jquery時，工作正常。

是否因爲jquery獲取new_cc的值與加載頁面時的值相同？

 <div class="selectfield"> 
     <select id="strDirectorate" name="strDirectorate" class="mainform_select" onChange="getNewCostCentre(this.value)"> 
      <option value="" selected="selected"></option> 
      <?php do { ?> 
       <option value="<?php echo $row_rsLocality['strLocalityShort']?>" <?php if($row_rsLocality['strLocalityShort'] == $strDirectorate){ echo $selected; } ?>><?php echo $row_rsLocality['strLocalityLong']?></option> 
      <?php 
       } while ($row_rsLocality = mysql_fetch_assoc($rsLocality)); 
        $rows = mysql_num_rows($rsLocality); 
       if($rows > 0) { 
        mysql_data_seek($rsLocality, 0); 
        $row_rsLocality = mysql_fetch_assoc($rsLocality); 
       } 
      ?>   
     </select> 
     </div> 


     <div id="txtNewCostCentre" class="selectfield"> 
     <select id="new_cc" name="new_cc" class="mainform_select" onChange="getNewPosition(this.value)"> 
      <option value="" selected="selected"></option> 
     </select> 
     </div> 

     <div class="actions"> 
     <input type="submit" id="submit_button" name="submit_button" class="styled_button" value="Submit" /> 
     </div> 

功能getNewCostCentre是

function getNewCostCentre(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtNewCostCentre").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
document.getElementById("txtNewCostCentre").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","getNewCostCentre.php?q="+str,true); 
xmlhttp.send(); 
} 

爲getNewCostCentre.php的代碼是

$sql="SELECT * FROM `tblcostcentreorganisation` WHERE `strOrganisation` LIKE '363 ".addslashes($dir)."%'"; 
$result = mysql_query($sql); 

if(isset($_GET["q"])){ 
    $display_string = '<select id="new_cc" name="new_cc" class="mainform_select" onChange="getNewPosition(this.value)" style="background-color:#F8E0E0">'; 
    $display_string .= '<option value="" selected="selected" disabled="disabled"></option>'; 
}else{ 
    $display_string = '<select id="new_cc" name="new_cc" class="mainform_select" onChange="getNewPosition(this.value)">'; 
} 

while($row = mysql_fetch_array($result)) 
    { 
    $cc = substr($row['strCostCentre'], 3, strlen($row['strCostCentre'])-3) . " " . substr($row['strOrganisation'], 3, strlen($row['strOrganisation'])-3); 
    $org_name = $row['strOrganisation']; 

    if ($org == $org_name){ 
     $display_string .= '<option value="'.$org_name.'" selected="selected">'.$cc.'</option>'; 
    }else{ 
     $display_string .= '<option value="'.$org_name.'">'.$cc.'</option>'; 
    } 
    } 

$display_string .= '</select>'; 

echo $display_string; 

而jquery的驗證是：

$(document).ready(function() { 
$('.selectfield select').change(function() { 

     var empty = false; 

     $('.selectfield select').each(function() { 
      $(this).css("background-color", "#FFFFFF"); 
      if ($(this).val().length == 0) { 
       $(this).css("background-color", "#F8E0E0"); 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('.actions input').attr('disabled', 'disabled'); 
     } else { 
      $('.actions input').removeAttr('disabled'); 
     } 
}); 
}); 

的的onload代碼是作爲如下。我認爲這是因爲我在（。）之後使用了.load .onload？

$(document).ready(function(){ 
window.onload = function(){ 

    //Load directorate, cost centre and position 
    if ($('#hid_stage').val() == "Rejected") { 
     var str = $('#hid_criteria').val(); 
     strencoded = encodeURIComponent(str); 
     $('#txtNewCostCentre').load("getNewCostCentre.php?cr="+strencoded); 
     $('#txtNewPosition').load("getNewPosition_ba.php?cr="+strencoded); 
    } 

    var empty = false; 

    $('.selectfield select').each(function() { 
     $(this).css("background-color", "#FFFFFF"); 
      if ($(this).val().length == 0) { 
       $(this).css("background-color", "#F8E0E0"); 
       empty = true; 
      } 
    }); 

    if (empty) { 
     $('.actions input').attr('disabled', 'disabled'); 
    } else { 
     $('.actions input').removeAttr('disabled'); 
    } 
} 
}); 

Answer 1

您結合您的change處理程序$('.selectfield select'）頁面加載時。這將處理程序附加到與該選擇器匹配的所有元素。

如果您然後更改此元素，它將不會附加處理程序。

相反，您應該使用live處理程序來匹配現在或將來創建的所有元素。

$('.selectfield select').live("change", function() { 
... 
}); 

UPDATE：

對於你的onload的問題，這將是容易得多不要重複你的代碼。如果您需要動態加載的內容後，關火驗證，然後觸發更改事件一旦加載完成 - 如下面的例子：

$(document).ready(function(){ 
    //Load directorate, cost centre and position 
    if ($('#hid_stage').val() == "Rejected") { 
     var str = $('#hid_criteria').val(); 
     strencoded = encodeURIComponent(str); 
     $('#txtNewCostCentre').load("getNewCostCentre.php?cr="+strencoded, function() { 
      $('.selectfield select').trigger("change"); 
     }); 
     $('#txtNewPosition').load("getNewPosition_ba.php?cr="+strencoded); 
    } 
}); 

Answer 2

輸入一個AJAX更新不應觸發JavaScript的變化事件，所以您在更改中指定的處理程序不會被調用。

從JavaScript規範（http://www.w3.org/TR/html401/interact/scripts.html）：

平變化=腳本[CT]當控制失去 輸入焦點並且由於獲得焦點其值已被修改時發生onchange事件。 該屬性適用於以下元素：INPUT，SELECT和 TEXTAREA。

我建議在您處理來自ajax請求的響應的JavaScript的相同部分執行驗證邏輯。行

document.getElementById("txtNewCostCentre").innerHTML=xmlhttp.responseText; 

之後添加通話

validate(); 

凡驗證較早地定義爲：

function validate() { 
    var empty = false; 

    $('.selectfield select').each(function() { 
     $(this).css("background-color", "#FFFFFF"); 
     if ($(this).val().length == 0) { 
      $(this).css("background-color", "#F8E0E0"); 
      empty = true; 
     } 
    }); 

    if (empty) { 
     $('.actions input').attr('disabled', 'disabled'); 
    } else { 
     $('.actions input').removeAttr('disabled'); 
    } 
} 

使您的jQuery驗證變爲：

$(document).ready(function() { 
$('.selectfield select').change(validate());