JavaScript包含在php中，不工作

Question

我尝试添加一个标记函数，就像我们在这里的计算器一样。当我输入标签并按下输入文本输入内部形成一个漂亮的标签。我的问题是，当JavaScript/HTML PHP页面单独加载它的作品。但是当我在我的主页中包含这个PHP它不工作。 这里是我的tag.php页

<link rel="stylesheet" type="text/css" href="./src/jquery.tagsinput.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript" src="./src/jquery.tagsinput.js"></script> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" /> 


<script type="text/javascript"> 
    function onAddTag(tag) { 
     alert("Added a tag: " + tag); 
    } 
    function onRemoveTag(tag) { 
     alert("Removed a tag: " + tag); 
    } 
    function onChangeTag(input,tag) { 
     alert("Changed a tag: " + tag); 
    } 
    $(function() { 
     $('#tags_2').tagsInput({ 
      width: 'auto', 
      onChange: function(elem, elem_tags) 
      { 
       var languages = ['php','ruby','javascript']; 
       $('.tag', elem_tags).each(function() 
       { 
        if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0) 
         $(this).css('background-color', 'yellow'); 
       }); 
      } 
     }); 
    }); 
</script> 
<!-- body --> 
     <p><label>Tags</label> 
     <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p> 

，这里是我的主网页

<div id="insert" class="form-action show"> 
    <h1>Insert</h1> 
    <p> 

    </p> 
    <form action="insert.php" method="post"> 
    <ul> 

     <li> 
     <?php include 'tag.php';?> 
     </li> 

     <li> 
     <input type="submit" value=" Submit " name="submit" class="button" /> 
     </li> 
    </ul> 
    </form> 
</div> 

，如果有帮助，jquery.tagsinput.css

div.tagsinput { 
    border: 1px solid #CCC; 
    background: #FFF; 
    padding: 5px; 
    width: 300px; 
    height: 100px; 
    overflow-y: auto 
} 

div.tagsinput span.tag { 
    border: 1px solid #a5d24a; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    display: block; 
    float: left; 
    padding: 5px; 
    text-decoration: none; 
    background: #cde69c; 
    color: #638421; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    font-family: helvetica; 
    font-size: 13px 
} 

div.tagsinput span.tag a { 
    font-weight: 700; 
    color: #82ad2b; 
    text-decoration: none; 
    font-size: 11px 
} 

div.tagsinput input { 
    width: 80px; 
    margin: 0 5px 5px 0; 
    font-family: helvetica; 
    font-size: 13px; 
    border: 1px solid transparent; 
    padding: 5px; 
    background: 0 0; 
    color: #000; 
    outline: 0 
} 

div.tagsinput div { 
    display: block; 
    float: left 
} 

.tags_clear { 
    clear: both; 
    width: 100%; 
    height: 0 
} 

.not_valid { 
    background: #FBD8DB!important; 
    color: #90111A!important 
} 

和主要页面的CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100); 
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css); 
body { 
    background: #1a1a1a; 
    color: white; 
    font-family: 'Roboto'; 
} 

.flat-form { 
    background: #e74c3c; 
    margin: 25px auto; 
    width: 80%; 
    height: 450px; 
    position: relative; 
    font-family: 'Roboto'; 
} 

.red-form { 
    background: #e74c3c; 
    margin: 25px auto; 
    width: 80%; 
    position: relative; 
    font-family: 'Roboto'; 
    padding: 15px; 
} 

label { 
    font-weight: bold; 
} 

.tabs { 
    background: #c0392b; 
    height: 40px; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    width: 100%; 
    position: relative; 
    display: block; 
    margin-bottom: 20px; 
} 

.tabs li { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

.tabs a { 
    background: #c0392b; 
    display: block; 
    float: left; 
    text-decoration: none; 
    color: white; 
    font-size: 16px; 
    padding: 12px 22px 12px 22px; 
    /*border-right: 1px solid @tab-border;*/ 
} 

.tabs li:last-child a { 
    border-right: none; 
    width: 174px; 
    padding-left: 0; 
    padding-right: 0; 
    text-align: center; 
} 

.tabs a.active { 
    background: #e74c3c; 
    border-right: none; 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 

.form-action { 
    padding: 0 20px; 
    position: relative; 
} 

.form-action h1 { 
    font-size: 42px; 
    padding-bottom: 10px; 
} 

.form-action p { 
    font-size: 12px; 
    padding-bottom: 10px; 
    line-height: 25px; 
} 

form { 
    padding-right: 20px !important; 
} 

form input[type=text], 
form input[type=password], 
form input[type=submit] { 
    font-family: 'Roboto'; 
} 

form input[type=text], 
form input[type=password] { 
    width: 100%; 
    height: 40px; 
    margin-bottom: 10px; 
    padding-left: 15px; 
    background: #fff; 
    border: none; 
    color: #000000; 
    outline: none; 
    font-weight:bold; 
} 

.dark-box { 
    background: #5e0400; 
    box-shadow: 1px 3px 3px #3d0100 inset; 
    height: 40px; 
    width: 50px; 
} 

.form-action .dark-box.bottom { 
    position: absolute; 
    right: 0; 
    bottom: -24px; 
} 

.tabs + .dark-box.top { 
    position: absolute; 
    right: 0; 
    top: 0px; 
} 

.show { 
    display: block; 
} 

.hide { 
    display: none; 
} 

.button { 
    border: none; 
    display: block; 
    background: #136899; 
    height: 40px; 
    width: 80px; 
    color: #ffffff; 
    text-align: center; 
    border-radius: 5px; 
    /*box-shadow: 0px 3px 1px #2075aa;*/ 
    -webkit-transition: all 0.15s linear; 
    -moz-transition: all 0.15s linear; 
    transition: all 0.15s linear; 
    font-weight: bold; 
} 

.button:hover { 
    background: #1e75aa; 
    /*box-shadow: 0 3px 1px #237bb2;*/ 
} 

.button:active { 
    background: #136899; 
    /*box-shadow: 0 3px 1px #0f608c;*/ 
} 

::-webkit-input-placeholder { 
    color: #e74c3c; 
    font-weight: bold; 
} 

:-moz-placeholder { 
    /* Firefox 18- */ 
    color: #e74c3c; 
    font-weight: bold; 
} 

::-moz-placeholder { 
    /* Firefox 19+ */ 
    color: #e74c3c; 
    font-weight: bold; 
} 

:-ms-input-placeholder { 
    color: #e74c3c; 
    font-weight: bold; 
} 

select { 
    margin: 10px; 
    border: 1px solid #111; 
    background: transparent; 
    width: 300px; 
    padding: 5px 35px 5px 5px; 
    font-size: 16px; 
    border: 1px solid #ccc; 
    font-weight: bold; 
    color: #504848; 
} 

#black-text { 
    color: rgb(242, 255, 63); 
    font-weight: bold; 
    font-family: 'Roboto'; 
} 

#dbutton { 
    border: none; 
    display: block; 
    background: #136899; 
    height: 40px; 
    width: 130px; 
    color: #ffffff; 
    text-align: center; 
    border-radius: 5px; 
    box-shadow: 0px 3px 1px #2075aa; 
    -webkit-transition: all 0.15s linear; 
     -moz-transition: all 0.15s linear; 
     transition: all 0.15s linear; 
     font-weight: bold; 

} 

#dbutton:hover { 
    background: #1e75aa; 
    box-shadow: 0 3px 1px #237bb2; 
} 

#dbutton:active { 
    background: #136899; 
    box-shadow: 0 3px 1px #0f608c; 
} 

#mdbutton { 
    border: none; 
    display: block; 
    background: #136899; 
    height: 25px; 
    width: 65px; 
    color: #ffffff; 
    text-align: center; 
    border-radius: 5px; 
    box-shadow: 0px 3px 1px #2075aa; 
    -webkit-transition: all 0.15s linear; 
     -moz-transition: all 0.15s linear; 
     transition: all 0.15s linear; 
     font-weight: bold; 

} 

#mdbutton:hover { 
    background: #1e75aa; 
    box-shadow: 0 3px 1px #237bb2; 
} 

#mdbutton:active { 
    background: #136899; 
    box-shadow: 0 3px 1px #0f608c; 
} 

.datagrid table { 
    border-collapse: collapse; 
    text-align: left; 
    width: 100%; 
} 

.datagrid { 
    font: normal 12px/150% Arial, Helvetica, sans-serif; 
    background: #fff; 
    overflow: hidden; 
    border: 1px solid #006699; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

.datagrid table td, 
.datagrid table th { 
    padding: 3px 10px; 
} 

.datagrid table thead th { 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F)); 
    background: -moz-linear-gradient(center top, #006699 5%, #00557F 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F'); 
    background-color: #006699; 
    color: #FFFFFF; 
    font-size: 15px; 
    font-weight: bold; 
    border-left: 1px solid #0070A8; 
} 

.datagrid table thead th:first-child { 
    border: none; 
} 

.datagrid table tbody td { 
    color: #00496B; 
    border-left: 1px solid #E1EEF4; 
    font-size: 12px; 
    font-weight: normal; 
} 

.datagrid table tbody .alt td { 
    background: #E1EEF4; 
    color: #00496B; 
} 

.datagrid table tbody td:first-child { 
    border-left: none; 
} 

.datagrid table tbody tr:last-child td { 
    border-bottom: none; 
} 

.datagrid table tfoot td div { 
    border-top: 1px solid #006699; 
    background: #E1EEF4; 
} 

.datagrid table tfoot td { 
    padding: 0; 
    font-size: 12px 
} 

.datagrid table tfoot td div { 
    padding: 2px; 
} 

.datagrid table tfoot td ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    text-align: right; 
} 

.datagrid table tfoot li { 
    display: inline; 
} 

.datagrid table tfoot li a { 
    text-decoration: none; 
    display: inline-block; 
    padding: 2px 8px; 
    margin: 1px; 
    color: #FFFFFF; 
    border: 1px solid #006699; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F)); 
    background: -moz-linear-gradient(center top, #006699 5%, #00557F 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F'); 
    background-color: #006699; 
} 

.datagrid table tfoot ul.active, 
.datagrid table tfoot ul a:hover { 
    text-decoration: none; 
    border-color: #006699; 
    color: #FFFFFF; 
    background: none; 
    background-color: #00557F; 
} 

div.dhtmlx_window_active, 
div.dhx_modal_cover_dv { 
    position: fixed !important; 
} 


table, th, td { 
    border: 1px solid black; 
    padding: 5px; 
    text-align: center; 
} 

Answer 1

Lo广告在你main.php头标记

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>tag</title> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

     <link rel="stylesheet" href="enter.css"> 
      <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> //changes here 



</head> 
<body> 

    <div class="container"> 
     <div class="flat-form"> 
      <div id="insert" class="form-action show"> 
       <h1>Insert</h1> 
       <p> 

       </p> 
       <form action="insert.php" method="post"> 
        <ul> 

     <li> 
      <?php include ('tag.php');?> 
     </li> 

         <li> 
          <input type="submit" value=" Submit " name="submit" class="button"/> 
         </li> 
        </ul> 
       </form> 
      </div> 
     </div> 
    </div> 
    <script src="enter.js"></script> 
</body> 
</html>