jquery - 从模态提交之前检查选项

Question

我在页面上有一个表单，但是没有提交。有一个使用 colorbox 插件启动模式对话框的链接。提交按钮实际上在那个对话框中。为了让我提交表单，我使用了 delegate() 因为提交按钮没有添加到 DOM，直到模式启动。

我添加了一个必须在提交表单之前选中的复选框，但我认为我遗漏了一些东西，因为无论是否选中，我都无法提交。

这是我的代码

JS

$('#openModal').colorbox({ 
    html: 'some text <input type="checkbox" name="chk" id="chk"><input id="mySubmit" type="button" value="submit form">' 
});

$('#mySubmit').click(function() {

    if ($('#chk').is(':checked')) {
        $('#myForm').submit();
    } else {
        alert('Must check first...');
    }
});

HTML

    <div id="openModal">open modal</div>

</form>

我错过了什么？

更新：有一个失踪的身份证...... dah。感谢@McMaster 抓住它。添加了身份证...

Answer 1

在这种情况下，您似乎没有委托您的点击事件。

尝试这个

$('body').delegate('click' ,'#mySubmit' ,function() {

    if ($('#chk').is(':checked')) {
        $('#myForm').submit();
    } else {
        alert('Must check first...');
    }
});

Answer 2

您正在动态添加input颜色框中使用的元素。注意从name到的变化id。

$('#openModal').colorbox({
    html: '<input type="checkbox" id="chk" /><input id="mySubmit" type="button" value="...">';
});

因此你应该使用on.

$('#mySubmit').on("click", function() {
    if ($('#chk').is(':checked')) {
        $('#myForm').submit();
    } else {
        alert('Must check first...');
    }
});