jquery-ui对话框中的jquery功能
问题描述:
我尝试在对话窗口中使用jquery功能。函数被分配给“.numeric”类。当我添加类到html输入时,它可以正常工作,但在对话框中不起作用。jquery-ui对话框中的jquery功能
// numeric function
!function($){$.fn.alphanumeric=function(p){var input=$(this),az="abcdefghijklmnopqrstuvwxyzążśźćłóę",options=$.extend({ichars:"[email protected]#$%^&*()+=[]\\';,/{}|\":<>?~`.- _",nchars:"",allow:"",limit:0,counter:""},p),s=options.allow.split(""),i=0,ch,regex;for(i;i<s.length;i++)-1!=options.ichars.indexOf(s[i])&&(s[i]="\\"+s[i]);if(options.nocaps&&(options.nchars+=az.toUpperCase()),options.allcaps&&(options.nchars+=az),options.limit&&options.limit>0){var interval,f,self=input;$(this).focus(function(){interval=window.setInterval(substring,100)}),$(this).bind("keyup keypress blur change",function(){clearInterval(interval),substring()}),substringFunction="function substring(){ var val = $(self).val();var length = val.length;if(length > options.limit){$(self).val($(self).val().substring(0,options.limit));}","undefined"!=typeof $(options.counter)&&(substringFunction+="if($(options.counter).html() != options.limit - length){$(options.counter).html((options.limit - length<=0)?'0':options.limit - length);}"),substringFunction+="}",eval(substringFunction),substring()}return options.allow=s.join("|"),regex=new RegExp(options.allow,"gi"),ch=(options.ichars+options.nchars).replace(regex,""),input.keypress(function(n){var i=String.fromCharCode(n.charCode?n.charCode:n.which);-1==ch.indexOf(i)||n.ctrlKey||n.preventDefault()}),input.blur(function(){var n=input.val(),i=0;for(i;i<n.length;i++)if(-1!=ch.indexOf(n[i]))return input.val(""),!1;return!1}),input},$.fn.numeric=function(n){var i="abcdefghijklmnopqrstuvwxyzążśźćłóę",t=i.toUpperCase();return this.each(function(){$(this).alphanumeric($.extend({nchars:i+t},n))})},$.fn.alpha=function(n){var i="1234567890";return this.each(function(){$(this).alphanumeric($.extend({nchars:i},n))})}}(jQuery);
$(document).ready(function() {
// if numeric function is present then define some classes
if (typeof $.fn.numeric == "function") {
$(".numeric").numeric();
}
$(".openWindow").click(function() {
var form = `
<form method="post">
<label for="onlynumbers">Input with numbers:</label>
<input type="text" id="onlynumbers" name="onlynumbers" value="" class="numeric" required />
</form>
`;
var $dialog = $("<div></div>").html(form).dialog({
height: 100,
width: 400,
title: 'Here is a problem'
});
$dialog.dialog("open");
});
});
#layout {
padding: 25px;
}
#layout form {
margin-bottom: 25px;
}
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/themes/redmond/jquery-ui.css" media="screen" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
<div id="layout">
<p>Look: this input accept only numbers.</p>
<form method="post">
<label for="onlynumbers">Input with numbers:</label>
<input type="text" id="onlynumbers" name="onlynumbers" value="" class="numeric" required />
</form>
<button type="button" class="openWindow">Open dialog window</button>
</div>
答
那是因为你的$(".numeric").numeric();
代码只调用一次,就会在创建对话框之前。
所以,这个代码应工作:
$(".openWindow").click(function(){
var form = `
<form method="post">
<label for="onlynumbers">Input with numbers:</label>
<input type="text" id="onlynumbers" name="onlynumbers" value="" class="numeric" required />
</form>
`;
var $dialog = $("<div></div>").html(form).dialog({ height: 100, width: 400, title: 'Here is a problem'});
$(".numeric").numeric();
$dialog.dialog("open");
});
是的,当然它的工作原理。但是有没有机会将其定义为“更全球化”? “数字”类将不是我想要在对话窗口中使用的唯一类。 – Miramar
你可以做一些诸如'$ dialog.find(“input [type = text]”)。numeric();' –
我必须找出其他方法。有些字段只有数字,有些是文字等。我需要使用我拥有的所有功能,我不会将它们加倍。但感谢您的帮助和关心。 – Miramar