jquery - 无法重新创建简单的 jQuery 即兴对话

Question

我从Trent Richardson 的即兴示例 10中几乎逐字复制了这个，但我无法让它工作。出于某种原因，示例 8 和 9 对我不起作用。我猜这很明显，但我无法弄清楚。

头：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jquery-impromptu.4.0.min.js" type="text/javascript"></script>
<!--<script src="common.js" type="text/javascript"></script>-->
<link rel="stylesheet" media="screen and (min-device-width: 1050px)" type="text/css"     href="example.css">

<script type="text/javascript">
  var txt = 'Try submitting an empty field:<br /> 
  input type="text" id="alertName" 
  name = "myname" value="" />';

  function mysubmitfunc(e,v,m,f){
    an = m.children('#alertName');
    if(f.alertName == ""){
        an.css("border","solid #ff0000 1px");
        return false;
    }
    return true;
  }
</script>

身体：

<button onclick="$.prompt(txt,{ submit: mysubmitfunc, buttons: { Ok:true } })" title="Example 10">Example 10</button>

Answer 1

HTML：

<button id="example10">Example 10</button>

JavaScript：

var text = 'Try submitting an empty field:<br><input type="text" id="alertName" name="myname" value="">';

$( '#example10' ).on( 'click', function () {      
    $.prompt( text, { submit: function ( e, val, $elem ) {
        var input = $elem.children( '#alertName' )[0];
        if ( input.value === '' ) {
            $( input ).css({ border: '1px solid red' });
            return false;
        }
        return true;
    }, buttons: { Ok: true } });    
});

现场演示：http: //jsfiddle.net/NcDEh/2/