1

好的.. 这是文件 lo_add.php：

<div class="rowElem">
    <label>Item <? echo $i ?>:</label>
    <div class="formRight searchDrop">
        <select name="lo_item[]" class="chzn-select" data-placeholder="Choose an Item">
            <option value=""></option>
            <? $item_query = mysql_query("select id,code,title,price from items where domain_id='$domain_id' order by code");
            while ($items = mysql_fetch_array($item_query)) { ?>
                <option value="<? echo $items["id"] ?>"><? echo $items["code"]." - ".$items["title"]." - RM".$items["price"] ?></option>
            <? } ?>
        </select>
    </div>
    <label>Delivery Address :</label>
    <div class="formRight searchDrop">
        <select name="lo_site[]" class="chzn-select" data-placeholder="Choose a Delivery Address">
            <option value=""></option>
                <? $site_query = mysql_query("select id,name from sites where domain_id='$domain_id' order by name");
                while ($sites = mysql_fetch_array($site_query)) { ?>
                    <option value="<? echo $sites["id"] ?>"><? echo $sites["name"] ?></option>
                <? } ?>
        </select>
    </div>
    <div class="fix"></div>
    <label>Quantity:<span class="req">*</span></label>
    <div class="formRight onlyNums">
        <input type="text" name="lo_quantity[]" id="lo_quantity[]"/>
    </div>
    <div class="fix"></div>
</div>

这是调用css的html文件，一开始你有什么：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Mecacom Technologies&reg; Maintenance System &copy; 2012</title>

<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css' />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#addElement').click(function() {
    var data = '';
    $.get('/ajax/lo_add.php', data, function(response){
      $('#hello').append(response);
    });
  });
});
</script>

</head>
<body>
    <div class="content" id="container">
        <div class="title"><h5>Record New Local Order</h5></div>

        <form action="<? echo $PHP_SELF ?>?add=1" id="valid" class="mainForm" method="post" enctype="multipart/form-data">
            <fieldset>
                <div class="widget">
                    <div class="head"><h5 class="iLocked2">New Local Order Credentials</h5></div>

                    <div class="rowElem noborder">
                        <label>Order ID:<span class="req">*</span></label>
                        <div class="formRight">
                            <input type="text" class="validate[required]" name="order_id" id="order_id"/>
                        </div>
                        <div class="fix"></div>
                   </div>

                    <div class="rowElem noborder">
                        <label>Order Date:<span class="req">*</span></label>
                        <div class="formRight">
                            <input type="text" name="order_date" class="datepicker validate[required]" />
                        </div>
                        <div class="fix"></div>
                    </div>
                    <div id="hello"></div>

                    <div class="fix"></div>
                    <a href="#" id="addElement">Click To Append More Item</a>
                    <input type="submit" value="Next" class="greyishBtn submitForm" />
                    <div class="fix"><input type="hidden" name="addnow" value="1" /></div>
                </div>
            </fieldset>

        </form>
    </div>
</body>
</html>

叹息..相当多...你认为在jquery追加后css没有正确呈现？

4

1 回答 1

1

我可以从您的实时测试页面中看到，您正在使用Chosen来处理下拉列表和 jQuery验证插件来验证数量字段。

第一件事是确保您调用chosen()新创建的下拉菜单。这必须为新元素调用，因为 Chosen 不仅依赖 CSS，还改变了下拉列表的整个 HTML 结构。所以添加这一行，在你的追加之后，

$(".chzn-select").chosen()

其次是确保您通过调用validate()它们来验证新创建的数量文本字段，或者重新调用您调用的任何 javascript 来初始化验证插件。

于 2012-08-10T04:05:47.817 回答