[英]jquery .show() hides immediately
This might be a simple problem with a simple solution but I've been stuck on it for awhile now. 这可能是一个简单的解决方案的问题,但我现在已经坚持了一段时间。 I have a button that will use Jquery to load a pdf once a textbox has been filled. 我有一个按钮,一旦文本框被填充,将使用Jquery加载pdf。 However, in my testing, the modal appears and disappears whenever the button is clicked. 但是,在我的测试中,只要单击按钮,模态就会出现并消失。 I've shaved it down to make a div appear first and the same thing happens. 我已经把它剃掉了以使div首先出现并且同样的事情发生了。 Could it be something with my code or is it how much scripts are being called? 它可能是我的代码的东西,或者它是多少脚本被调用?
HTML 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 CSS
.pdf-dialog{display:none;}
JQuery 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');
}
}]
});
**/
});
This is how I'm arranging my scripts at the bottom of the page 这就是我在页面底部安排脚本的方法
<!-- 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>
Could the arrangement be the issue? 安排可能是问题吗? Please help 请帮忙
Change <button id="submit" class="retrievedoc" type="submit" >Submit</button>
to <button id="submit" class="retrievedoc" type="button" >Submit</button>
更改<button id="submit" class="retrievedoc" type="submit" >Submit</button>
至<button id="submit" class="retrievedoc" type="button" >Submit</button>
If the type is submit the form will automatically submit and will cancel out the dialog. 如果提交类型,表单将自动提交并取消对话框。
Use: e.preventDefault();
使用: e.preventDefault();
: :
$('.retrievedoc').on('click', function(e) {
e.preventDefault();
$("#pdf-dialog").show();
.....
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.