Question

我现在已经有一段时间了，无法弄明白。

我有一个HTML页面，我正在使用我已经草拟的一些Javascript来控制。我通过HTML页面中的脚本标记包含脚本。一切都运转良好。

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

Head Script Tags：

<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>

我的Javascript： （包含在页面底部的标签<script src="/js/artists.js"></script>中）

(function() {
/* global APP */

$.ajax({
    url: APP.requests,
    method: "POST",
    dataType: "html",
    data: {'fetchCountries':'html'},
    success: populateCountry
});

$.ajax({
    url: APP.requests,
    method: "POST",
    dataType: "html",
    data: {'fetchArtists':'html'},
    success: populateArtists
});

$.ajax({
    url: APP.requests,
    method: "POST",
    data: {'fetchStyles':'html'},
    success: populateStyles
});    


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


function populateCountry(data) {
    var dropdown = document.getElementById("in-country");
    dropdown.innerHTML += data;
}


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;
    }
}


function populateStyles(data) {
    var styleList = document.getElementById("style-list");
    var styleDropdown = document.getElementById("artist-in-style");

    if (data) {
        data.split(',').forEach(function (data) {
            styleList.innerHTML += '<li class="list-group-item">' + data + '</li>';
            styleDropdown.innerHTML += '<option>' + data + '</option>';
        });
    }
}


function enterArtist() {
    var insertData = {
        insertArtist:true,
        artistName: document.getElementById("artist-in-name").value,
        artistCountry: document.getElementById("in-country").value,
        artistDob: document.getElementById("artist-dob").value,
        artistDod: document.getElementById("artist-dod").value,
        artistStyle: document.getElementById("artist-in-style").value
    };

    $.ajax({
        url: APP.requests,
        method: "POST",
        data: {'insertArtist': JSON.stringify(insertData)},
        success: function (data) {

            console.log('data:' + data);
            if (data === 'true') {
                var csv = '';
                delete insertData.insertArtist;

                for (var x in insertData) {
                    csv += insertData[x] + ',';
                }

                populateArtists(csv.substring(0, csv.length - 1));
            }
        }
    });
}


function addStyle () {
    var newStyle = document.getElementById('add-style-in');

    $.ajax({
        url: APP.requests,
        method: "POST",
        data: {'insertStyle':true,
               'newStyle':newStyle.value.toLowerCase()},
        success: function(data) {
            populateStyles(data);
            newStyle.value = '';
        }
    });
}
}());

任何人都可以帮我吗？我很乐意提供所需的任何其他信息。提前谢谢。

Answer 1

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

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

Answer 2

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();
    });
}

从脚本标签添加JavaScript文件打破jQuery UI

2 个答案: