0

我有一个带有 2 个选择框的页面，其中一个是由 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');
        }
});
});

加载代码如下。我认为这是因为我在 .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');
    }
}
});
4

2 回答 2

2

当页面加载时，您正在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);
    }
});
于 2013-07-14T13:30:41.910 回答
0

输入的 ajax 更新不应触发 javascript 更改事件，因此您在更改中指定的处理程序不会被调用。

来自 javascript 规范（http://www.w3.org/TR/html401/interact/scripts.html）：

onchange = script [CT] 当控件失去输入焦点并且在获得焦点后其值已被修改时，会发生 onchange 事件。此属性适用于以下元素：INPUT、SELECT 和 TEXTAREA。

我建议在您处理来自 ajax 请求的响应的 javascript 的同一部分中执行验证逻辑。就在这条线之后

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());
于 2013-07-14T13:38:49.140 回答