从脚本标记添加JavaScript文件会破坏jQuery UI

这件事我已经做了一段时间了，还没弄明白

我有一个HTML页面，我正在用我起草的一些Javascript控制它。我在HTML页面中通过脚本标记包含脚本。一切都很顺利

我想添加jQueryUI的日期选择器，但只要我还在使用Javascript文件，它就无法工作。如果我将jQuery UI代码添加到Javascript中，它将无法工作。如果我将jQuery UI代码与JS文件分开，它将无法工作，除非我注释掉我的JS文件

头脚本标签：

<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/APP.js"></script>

页面标记

<script>
    $(function() {
      $( ".datepicker" ).datepicker();
    });
</script>

<div class="col-md-7 col-md-offset-2">

  <button id="enter-artist">Enter Artist</button>

  <table id="artist-table" class="table table-bordered table-hover">
    <tr><th>Name</th><th>Origin</th><th>Birthday</th><th>Deceased</th><th>Age</th><th>Style</th></tr>

    <tr>
      <td><input id="artist-in-name" type="text"></td>
      <td><select id="in-country"></select></td>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text" class="datepicker"></td>
      <td></td>
      <td><select id="artist-in-style"></select></td>
    </tr>

  </table>

</div>

<div class="col-md-3">
  <div class="panel panel-default">

    <div id="style-heading" class="panel-heading">
      <h3 class="panel-title">Style</h3>
    </div>

    <div id="styles" class="panel-body">
      <button id="add-style-button">Add Style</button>
      <input id="add-style-in" type="text">
      <ul id="style-list" class="list-group"></ul>
    </div>

  </div>
</div>

<script src="/js/artists.js"></script>

$（函数（）{
$（“.datepicker”）.datepicker（）；
});
进入艺术家
姓名来源出生日死亡日期风格
风格
添加样式

我的Javascript: （包括在页面底部的标签中）

（函数（）{
/*全球应用程序*/
$.ajax({
url:APP.requests，
方法：“张贴”，
数据类型：“html”，
数据：{'fetchCountries'：'html'}，
成功：普及国家
});
$.ajax({
url:APP.requests，
方法：“张贴”，
数据类型：“html”，
数据：{'fetchArtists'：'html'}，
成功：大众艺术家
});
$.ajax({
url:APP.requests，
方法：“张贴”，
数据：{'fetchStyles'：'html'}，
成功：流行风格
});    
document.getElementById（“输入艺术家”）.addEventListener（“单击”，输入艺术家）；
document.getElementById（“添加样式按钮”）.addEventListener（“单击”，添加样式）；
函数populateCountry（数据）{
var dropdown=document.getElementById（“国内”）；
dropdown.innerHTML+=数据；
}
函数populateArtists（数据）{
var artistTable=document.getElementById（“艺术家表”）；
var tableRows=''；
如果（数据）{
data.split（“|”）.forEach（函数（艺术家）{
tableRows+=''；
艺术家.分割（'，）.forEach（函数（attrib）{
tableRows+=''+attrib+''；
});
tableRows+=''；
});
Artistable.innerHTML+=表格行；
}
}
函数populateStyles（数据）{
var styleList=document.getElementById（“样式列表”）；
var styleDropdown=document.getElementById（“风格中的艺术家”）；
如果（数据）{
data.split（'，）.forEach（函数（数据）{
styleList.innerHTML+='
'+data+'
'；
styleDropdown.innerHTML+=''+数据+''；
});
}
}
函数enterArtist（）{
var insertData={
插入者：是的，
艺人名称：document.getElementById（“艺人名称”）.value，
artistCountry:document.getElementById（“国内”）.value，
artistDob:document.getElementById（“艺术家dob”）.value，
artistDod:document.getElementById（“艺术家dod”）.value，
artistStyle:document.getElementById（“风格艺术家”）.value
};
$.ajax({
url:APP.requests，
方法：“张贴”，
数据：{'insertArtist'：JSON.stringify（insertData）}，
成功：功能（数据）{
console.log（'数据：'+数据）；
如果（数据=='true'）{
var csv=“”；
删除insertData.insertArtist；
for（插入数据中的变量x）{
csv+=插入数据[x]+'，'；
}
populateArtists（csv.substring（0，csv.length-1））；
}
}
});
}
函数addStyle（）{
var newStyle=document.getElementById（'add-style-in'）；
$.ajax({
url:APP.requests，
方法：“张贴”，
数据：{'insertStyle'：true，
'newStyle'：newStyle.value.toLowerCase（）}，
成功：功能（数据）{
大众风格（数据）；
newStyle.value=''；
}
});
}
}());

有人能帮我吗？

---

我很乐意提供任何需要的额外信息。提前感谢。

尝试使用addEventListener，而不是直接设置onclick-

document.getElementById("enter-artist").addEventListener("click",enterArtist);
document.getElementById("add-style-button").addEventListener("click",addStyle);

---

populateArtist

函数作用于我希望添加datepicker jQuery的HTML元素。这会阻止jQuery工作。我为这个函数添加了jQuery代码，它开始工作了

function populateArtists(data) {
    var artistTable = document.getElementById("artist-table");
    var tableRows = '';


    if (data) {
        data.split('|').forEach(function (artist) {
            tableRows += '<tr>';
            artist.split(',').forEach(function (attrib) {
                tableRows += '<td>'+attrib+'</td>';
            });
            tableRows += '</tr>';
        });

        artistTable.innerHTML += tableRows;
    }

    // ADDED THE jQuery TO MY CODE
    $(function() {
        $( ".datepicker" ).datepicker();
    });
}

函数populateArtists（数据）{
var artistTable=document.getElementById（“艺术家表”）；
var tableRows=''；
如果（数据）{
data.split（“|”）.forEach（函数（艺术家）{
tableRows+=''；
艺术家.分割（'，）.forEach（函数（attrib）{
tableRows+=''+attrib+''；
});
tableRows+=''；
});
Artistable.innerHTML+=表格行；
}
//将jQuery添加到我的代码中
$（函数（）{
$（“.datepicker”）.datepicker（）；
});
}

请发布您自己的javascript文件，这些文件会导致问题？您的控制台中是否有任何错误？控制台中是否有任何javascript错误？我不知道我是如何漏掉的，但是是的。对于以下两行。1.document.getElementById（“输入艺术家”）.onclick=enterArtister；2.document.getElementById（“添加样式按钮”）.onclick=addStyle；注释掉，没有错误，仍然不工作。控制台错误是由我在故障排除期间将脚本标记移到脚本顶部引起的。移动到底部，错误很明显。没有运气。同样的错误（我现在正在调查），Jquery在包含我的代码时仍然不起作用。

function populateArtists(data) {
    var artistTable = document.getElementById("artist-table");
    var tableRows = '';


    if (data) {
        data.split('|').forEach(function (artist) {
            tableRows += '<tr>';
            artist.split(',').forEach(function (attrib) {
                tableRows += '<td>'+attrib+'</td>';
            });
            tableRows += '</tr>';
        });

        artistTable.innerHTML += tableRows;
    }

    // ADDED THE jQuery TO MY CODE
    $(function() {
        $( ".datepicker" ).datepicker();
    });
}