我有一个奇怪的问题，我使用ajax发布的所有字段均为空，但是当我在jsfiddle中发布相同的代码时，效果很好。
我唯一能想到的就是它可能是因为我是从弹出窗口（featherlight插件）发布的。
我的代码：
<script>
$( document ).ready(function() {
// Show extra fields when selecting option from dropdown list
$('#offertetijden').change(function() {
// console.log($(this).val())
$('.hiddenoffertefields').slideDown('fast');
});
// Post values from new fields to php script
$("#offertepopup").on("click",".offertebutton",function(){
event.preventDefault();
var $tijd = $('#offertetijden').val();
var $volwassenen = $("input[name='volwassenen']").val();
var $tieners = $('#tieners').val();
var $kinderen = $('#kinderen').val();
var $minis = $('#minis').val();
var $babys = $('#babys').val();
var $mailadres = $('#mailadres').val();
url = 'includes/offertescript.php';
var posting = $.post(url, {
tijd: $tijd,
volwassenen: $volwassenen,
tieners: $tieners,
kinderen: $kinderen,
minis: $minis,
babys: $babys,
mailadres: $mailadres
});
posting.done(function( data ) {
$( ".offerteresult" ).empty().slideDown('fast').append( data );
});
});
});
</script>
我的HTML：
<div class="lightbox offertepopup" id="offertepopup">
<span class="toolspan">Vraag een offerte aan</span>
<form class="" action="includes/offertescript" method="post">
<select id="offertetijden">
<option value="none" disabled selected>Maak uw keuze</option>
<optgroup label="Ontbijt">
<option value="ont_1">Ma t/m Vr / 09:00 - 11:30 / 0,5 uur</option>
<option value="ont_2">Ma t/m Vr / 09:00 - 11:30 / 1 uur</option>
<option value="ont_3">Ma t/m Vr / 09:00 - 11:30 / 1,5 uur</option>
<option value="ont_4">Ma t/m Vr / 09:00 - 11:30 / 2 uur</option>
<option value="ont_5">Ma t/m Vr / 09:00 - 11:30 / 2,5 uur</option>
<option value="ont_6">Za - Zo / 09:00 - 11:30 / 0,5 uur</option>
<option value="ont_7">Za - Zo / 09:00 - 11:30 / 1 uur</option>
<option value="ont_8">Za - Zo / 09:00 - 11:30 / 1,5 uur</option>
<option value="ont_9">Za - Zo / 09:00 - 11:30 / 2 uur</option>
<option value="ont_10">Za - Zo / 09:00 - 11:30 / 2,5 uur</option>
</optgroup>
<optgroup label="Lunch">
<option value="lun_1">Ma t/m Vr / 12:00 - 15:00 / 0,5 uur</option>
<option value="lun_2">Ma t/m Vr / 12:00 - 15:00 / 1 uur</option>
<option value="lun_3">Ma t/m Vr / 12:00 - 15:00 / 1,5 uur</option>
<option value="lun_4">Ma t/m Vr / 12:00 - 15:00 / 2 uur</option>
<option value="lun_5">Ma t/m Vr / 12:00 - 15:00 / 2,5 uur</option>
<option value="lun_6">Ma t/m Vr / 12:00 - 15:00 / 3 uur</option>
<option value="lun_7">Za - Zo / 12:00 - 15:30 / 0,5 uur</option>
<option value="lun_8">Za - Zo / 12:00 - 15:30 / 1 uur</option>
<option value="lun_9">Za - Zo / 12:00 - 15:30 / 1,5 uur</option>
<option value="lun_10">Za - Zo / 12:00 - 15:30 / 2 uur</option>
<option value="lun_11">Za - Zo / 12:00 - 15:30 / 2,5 uur</option>
<option value="lun_12">Za - Zo / 12:00 - 15:30 / 3 uur</option>
<option value="lun_13">Za - Zo / 12:00 - 15:30 / 3,5 uur</option>
</optgroup>
<optgroup label="Diner">
<option value="din_1">Ma t/m Do / 17:00 - 22:00 / 1 uur</option>
<option value="din_2">Ma t/m Do / 17:00 - 22:00 / 1,5 uur</option>
<option value="din_3">Ma t/m Do / 17:00 - 22:00 / 2 uur</option>
<option value="din_4">Ma t/m Do / 17:00 - 22:00 / 2,5 uur</option>
<option value="din_5">Ma t/m Do / 17:00 - 22:00 / 3 uur</option>
<option value="din_6">Ma t/m Do / 17:00 - 22:00 / 3,5 uur</option>
<option value="din_7">Ma t/m Do / 17:00 - 22:00 / 4+ uur</option>
<option value="din_8">Vr t/m Zo / 17:00 - 22:00 / 1 uur</option>
<option value="din_9">Vr t/m Zo / 17:00 - 22:00 / 1,5 uur</option>
<option value="din_10">Vr t/m Zo / 17:00 - 22:00 / 2 uur</option>
<option value="din_11">Vr t/m Zo / 17:00 - 22:00 / 2,5 uur</option>
<option value="din_12">Vr t/m Zo / 17:00 - 22:00 / 3 uur</option>
<option value="din_13">Vr t/m Zo / 17:00 - 22:00 / 3,5 uur</option>
<option value="din_14">Vr t/m Zo / 17:00 - 22:00 / 4+ uur</option>
</optgroup>
</select>
<div class="hiddenoffertefields">
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="toolspanbot">Hoe is u groep verdeeld?</span>
</div>
<div class="col-md-6">
<label class="offertelabel">Aantal volwassenen:</label>
</div>
<div class="col-md-6">
<input type="text" id="volwassenen" name="volwassenen" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Aantal kinderen (6-11 jaar):</label>
</div>
<div class="col-md-6">
<input type="text" id="kinderen" name="kinderen" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Aantal kinderen (6-11 jaar):</label>
</div>
<div class="col-md-6">
<input type="text" id="kinderen" name="kinderen" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Aantal mini's (4-7 jaar):</label>
</div>
<div class="col-md-6">
<input type="text" id="minis" name="mini's" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Aantal baby's (0-4 jaar):</label>
</div>
<div class="col-md-6">
<input type="text" id="babys" name="baby's" placeholder="Vul in">
</div>
<div class="col-md-12">
<span class="toolspanbot">Uw gegevens</span>
</div>
<div class="col-md-6">
<label class="offertelabel">Voornaam:</label>
</div>
<div class="col-md-6">
<input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Achternaam:</label>
</div>
<div class="col-md-6">
<input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Bedrijfsnaam (optioneel):</label>
</div>
<div class="col-md-6">
<input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Telefoonnummer:</label>
</div>
<div class="col-md-6">
<input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
</div>
<div class="col-md-6">
<label class="offertelabel">Opmerkingen:</label>
</div>
<div class="col-md-6">
<input type="textarea" class="opmerkingofferte" id="mailadres" name="mailadres" placeholder="Vul in">
</div>
<div class="col-md-12">
<div class="infobox">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="#2684E0" fill-rule="nonzero" d="M9.99957672 0C15.5216931 0 20 4.47746032 20 9.99957672 20 15.5216931 15.5216931 20 9.99957672 20 4.47746032 20 0 15.5216931 0 9.99957672 0 4.47746032 4.47746032 0 9.99957672 0zM9.14 8.22v7.49h1.82V8.22H9.14zM10.036 5c-.29866816 0-.54599902.10266564-.742.308S9 5.77466508 9 6.092c0 .30800154.09799902.56466564.294.77.19600098.20533436.44333184.308.742.308.2986682 0 .545999-.10266564.742-.308.196001-.20533436.294-.46199846.294-.77 0-.31733492-.097999-.57866564-.294-.784-.196001-.20533436-.4433318-.308-.742-.308z"></path>
</svg>
<span>
Wanneer u met 25 of meer personen komt, kijken wij graag de beschikbaarheid voor u na. De aanvraag voor een reservering vanaf 25 personen kan verstuurd worden naar <a class="infoboxlink" href="mailto:spijkenisse@website.nu">spijkenisse@website.nu</a> of telefonisch via 0181-769000.
</span>
</div>
</div>
</form>
</div>
</div>
<button type="button" name="button" class="offertebutton">Vraag offerte aan</button>
<div class="popupfooter">
<a target="_blank" href="https://www.website.nl">
<img src="assets/images/snm_dark.png" alt="">
</a>
</div>
<div class="offerteresult">
</div>
</div>
</div>
我要发布的字段已经加载（显示：无），当有人从下拉列表中选择一个值时显示。因此，不应该由jQuery无法找到这些字段。
jQuery本身可以运行，我可以看到这些字段已发布到我的“网络”标签中的脚本中，但所有字段均为空。
如您所见，我尝试了两种方法来寻找价值。
此
var $tijd = $('#offertetijden').val();
或者这个
var $volwassenen = $("input[name='volwassenen']").val();
但是两者都是空的。
答案 0 :(得分：0)
在我看来，发布时值尚未准备就绪。
如何用setTimeout()包装该块？像这样
setTimeout(function(){
var posting = $.post(url, {
tijd: $tijd,
volwassenen: $volwassenen,
tieners: $tieners,
kinderen: $kinderen,
minis: $minis,
babys: $babys,
mailadres: $mailadres
});
posting.done(function( data ) {
$( ".offerteresult" ).empty().slideDown('fast').append( data );
});
});
希望这会有所帮助。
答案 1 :(得分：0)
我找到了答案。
显然，featherlight弹出窗口会在弹出窗口中重新创建DOM，因此我不得不重写config选项，以确保弹出窗口中的HTML始终存在。
$.extend($.featherlight.defaults, {
persist: true
});
这为我修复了它。