感谢阅读，我正在尝试使用promise()方法将一个函数集成到另一个函数中。以下jQuery / ajax当前在代码的第一部分中提交了一个表单，然后有另一个函数在用户提交表单时尝试模拟标签点击。
需要点击模拟的标签是：
<a href="#contact"><li><label id="contactlink" class="contactbox" for="lightbox-one">Contact</label></li></a>
所以这是代码：
<script>
$(document).ready(function() {
$("#contactform").submit(function(e)
{
e.preventDefault();
// Bind click handler outside of AJAX call
$('label').click(function() {
var labelID;
labelID = $(this).attr('for');
$('#'+labelID).trigger('click');
});
// Make AJAX call
$.ajax({
type: "POST",
url: "contact-form-handler.php",
dataType: "text",
data: {
message: $('#message').val(),
addy: $('#addy').val(),
contactsubmit: 'yes'
}
}).done(function() {
console.log('success');
$('label').trigger('click');
});
});
});
</script>
除了第二个功能外，一切正常：
.promise().done(function() {
$('label').click(function() {
var labelID;
labelID = $(this).attr('for');
$(‘#’+labelID).trigger(‘click’);
});
我会以某种方式合并.promise().done(function()和$('label').click(function()吗？我不知道如何正确编写第二个函数，以便模拟在表单提交时单击该标签。你能告诉我我的完整代码应该是什么吗？我很困惑！！提前致谢
更新：标签用于在点击时打开此弹出窗口：
<aside class="lightbox">
<input type="checkbox" class="state" id="lightbox-one" />
<article class="content">
<h1>Content Here</h1>
</article>
<label class="backdrop" for="lightbox-one"></label>
</aside>
以下是弹出窗口的CSS（灯箱）：
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 75px;
cursor: pointer;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '';
position: absolute;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
left:0; top: -3px;
width: 65px; height: 30px;
background: rgba(200, 200, 200, 0.49);
border-radius: 15px;
transition: background-color .2s;
}
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
width: 20px; height: 20px;
transition: all .2s;
border-radius: 50%;
background: #E4E4E4;
top: 2px; left: 5px;
}
/* on checked */
[type="checkbox"]:checked + label:before {
background:rgba(125, 208, 139, 0.62);
}
[type="checkbox"]:checked + label:after {
background: #ff9a03;
top: 2px; left: 40px;
}
[type="checkbox"]:checked + label .ui,
[type="checkbox"]:not(:checked) + label .ui:before,
[type="checkbox"]:checked + label .ui:after {
position: absolute;
left: 6px;
width: 65px;
border-radius: 15px;
font-size: 16px;
font-weight: bold;
line-height: 22px;
transition: all .2s;
}
[type="checkbox"]:not(:checked) + label .ui:before {
content: "no";
left: 32px
}
[type="checkbox"]:checked + label .ui:after {
content: "yes";
color: #ff9a03;
}
[type="checkbox"]:focus + label:before {
border: 1px dashed #777;
box-sizing: border-box;
margin-top: -1px;
}
.state{position:absolute;top:0;left:-100vw}
.state:checked ~ .content{-webkit-transform:none;-ms-transform:none;transform:none;margin-top: 10%;overflow:auto; border-radius: 9px;height:300px;}
.state:checked ~ .backdrop{bottom:0;opacity:1;z-index:1}
.lightbox{position:fixed;top:0;right:0;left:0;height:0;padding:0 20px}
.lightbox .content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;position:relative;z-index:2;max-width:500px;max-height:95vh;margin:20px auto;padding:20px;background:#fff;-webkit-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:.3s -webkit-transform ease-in-out;transition:.3s transform ease-in-out;border:1px solid rgba(0,0,0,0.1)}
.lightbox .header,.lightbox .footer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.lightbox .header .h,.lightbox .footer .h{margin:0}
.lightbox .header .button:not(:first-child),.lightbox .footer .button:not(:first-child){margin-left:auto}
.lightbox .header{padding-bottom:10px}
.lightbox .footer{padding-top:20px}
.lightbox .main{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}
.lightbox .backdrop{position:fixed;z-index:-1;top:0;right:0;bottom:100%;left:0;opacity:0;background:rgba(0,0,0,0.3);-webkit-transition:.3s opacity ease-in-out;transition:.3s opacity ease-in-out}
答案 0 :(得分：1)
在Bergi的指导下，我能够通过将此代码添加到我的成功处理程序来解决此问题：$('#lightbox-one').prop('checked', true);
整个代码现在看起来像：
<script>
$(document).ready(function() {
$("#contactform").submit(function(e)
{
e.preventDefault();
if ($.trim($("#message").val()) === "" || $.trim($("#addy").val()) === "")
{
return false;
}
var value = document.getElementById('message').value;
if (value.length < 10) {
return false;
}
$.ajax({
type: "POST",
url: "contact-form-handler.php",
dataType:"text",
data: {message: $('#message').val(), addy: $('#addy').val(), contactsubmit: 'yes'},
success: function()
{
$('#lightbox-one').prop('checked', true);
}
})
});
});
</script>
答案 1 :(得分：0)
$.ajax()方法自动返回一个promise - 它是函数的原生函数。此外，由于您使用的是.done()，因此您不应再使用已弃用的.success()回调。无需链.promise().done()。
关于点击事件绑定，您应该在AJAX调用之外执行，否则您将多个点击事件处理程序绑定到<label>每一次成功的电话。因此，您应该将事件处理程序绑定到 AJAX调用之外，然后在AJAX调用时使用.trigger()来触发click事件。
您尚未提供您要定位的<label>元素的上下文...
// Bind click handler outside of AJAX call
$('label').click(function() {
var labelID;
labelID = $(this).attr('for');
$('#'+labelID).trigger('click');
});
// Make AJAX call
$.ajax({
type: "POST",
url: "contact-form-handler.php",
dataType: "text",
data: {
message: $('#message').val(),
addy: $('#addy').val(),
contactsubmit: 'yes'
}
}).done(function() {
console.log('success');
$('label').trigger('click');
});
此外，我不知道这是否有意，但您使用智能引号（‘和’）作为.done()函数的最后一行。您应该使用哑引号'代替。