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代码如下。我认为这是因为我在（之后）.onload中使用.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

您在页面加载时绑定change $('.selectfield select'处理程序。这会将处理程序附加到与该选择器匹配的所有元素。

如果您随后更改此元素，则不会附加处理程序。

相反，您应该使用live处理程序来匹配现在或将来创建的所有元素。

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

更新：

对于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）：

onchange = script [CT] onchange事件在控件丢失时发生自获得关注以来，输入焦点及其值已被修改。此属性适用于以下元素：INPUT，SELECT和 TEXTAREA。

我建议你在javascript的同一部分执行验证逻辑，你要处理来自ajax请求的响应。就在行

之后

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

添加通话

validate();

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

Jquery获取使用AJAX加载的元素的值

2 个答案: