Question

这可能是一个简单的解决方案，但我现在已经坚持了一段时间。我有一个按钮，一旦文本框被填充，将使用Jquery加载pdf。但是，在我的测试中，只要单击按钮，模态就会出现并消失。我把它剃掉了以使div首先出现并且同样的事情发生了。它可能是我的代码的一部分，还是调用了多少脚本？

HTML

<form>
    <p>Key number : <input type="text" name="keynumber" /></p>
    <p><button id="submit" class="retrievedoc" type="submit" >Submit</button></p>
</form>
<div id="pdf-dialog">
    <p>TEST</p>
</div>

CSS

.pdf-dialog{display:none;}

JQuery的

$('.retrievedoc').on('click', function() {
    $("#pdf-dialog").show();
    /**$(".pdf-dialog").dialog({
            title: 'Document',
            width: 500,
            height: 800,
            draggable: false,
            modal: true,
            dialogClass: "readpdf-dialog",
            buttons: [{
                text: 'Close',
                click: function() {
                    $(this).dialog('close');
                }
            }] 
        });
    **/
});

这就是我在页面底部排列脚本的方式

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="<?php echo base_url(); ?>assets/js/functions.js"></script> 
     <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>

安排可能是问题吗？请帮忙

Answer 1

更改 <button id="submit" class="retrievedoc" type="submit" >Submit</button> 至 <button id="submit" class="retrievedoc" type="button" >Submit</button>

如果提交类型，表单将自动提交并取消对话框。

Answer 2

使用：e.preventDefault();：

$('.retrievedoc').on('click', function(e) {
    e.preventDefault();
    $("#pdf-dialog").show();
    .....
});

jquery .show（）立即隐藏

2 个答案: