jquery-ui對話框中的jquery功能

Question

我嘗試在對話窗口中使用jquery功能。函數被分配給「.numeric」類。當我添加類到html輸入時，它可以正常工作，但在對話框中不起作用。

// numeric function 
 
!function($){$.fn.alphanumeric=function(p){var input=$(this),az="abcdefghijklmnopqrstuvwxyzążśźćłóę",options=$.extend({ichars:"!@#$%^&*()+=[]\\';,/{}|\":<>?~`.- _",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>

Answer 1

那是因爲你的$(".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"); 

     });