AJAX로로드 된 요소의 Jquery 값을 얻습니다.

Question

두 개의 선택 상자가있는 페이지가 있는데, 그 중 하나는 AJAX 호출로로드됩니다. 그런 다음 제출 단추를 활성화하기 전에 jquery로 요소의 유효성을 검사하려고합니다. 정적 선택 (strDirectorate)을 변경할 때 jquery가 정상적으로 작동하지만 AJAX (new_cc)에 의해로드 된 것을 변경하지는 않습니다.

페이지가로드 될 때 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'); 
     } 
}); 
}); 

온로드 코드는 같다 다음과 같습니다. 나는 (이후) .load 내에서 .load를 사용하기 때문에 그것이라고 가정합니다.

$(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

당신은 $('.selectfield select' 대한 change 처리기를 바인딩) 페이지가로드. 이렇게하면 해당 선택기와 일치하는 모든 요소에 핸들러가 연결됩니다.

이 요소를 변경하면 핸들러가 연결되지 않습니다.

대신 현재 존재하거나 앞으로 생성 될 모든 요소를 ​​일치 시키려면 live 처리기를 사용해야합니다.

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

UPDATE :

하면 온로드 문제를 들어,이 코드를 반복하지 훨씬 쉬울 것이다.

$(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

입력의 아약스 업데이트는 자바 스크립트 변화를 유발하지 않아야 다음의 예처럼 - 동적으로 컨텐츠를로드 한 후 유효성 검사를 해고해야하는 경우로드가 완료되면, 다음 변경 이벤트를 트리거 이벤트에서 변경 한 핸들러는 호출되지 않습니다. 자바 스크립트 명세 (http://www.w3.org/TR/html401/interact/scripts.html) 발

:

의 onchange = 스크립트 제어가 입력 포커스를 잃고 가치가 포커스를 확보 이후 수정되었을 때 [CT]를 onchange를 이벤트가 발생한다. 이 특성은 다음 요소에 적용됩니다. INPUT, SELECT 및 TEXTAREA.

아약스 요청의 응답을 처리하는 javascript의 동일한 부분에서 유효성 검사 논리를 수행하는 것이 좋습니다.

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