所有JQuery调用只能使用$（document）.on（...）

Question

Jquery的新手，但有一些问题，了解它是如何工作的。具体来说，我正在尝试使用类i在.dataPickerIcon元素上设置一个事件监听器，它响应点击，prepend() - 将更多HTML转换为目标`“。这是HTML：

<div class="row workrow">
    <table class="appDataTable" id="dataPickerTable">
        <tr class="appTableHeaderRow" id="dataPickerTableHeaderRow">
            <th>Character</th>
            <th>Weapon</th>
            <th>Add Below</th>
        </tr>
        <tr class="appTableContentRow">
            <td>Boba Fett</td>
            <td>Blaster</td>
            <td class="dataPickerIconDiv">
                <i class="fa fa-arrow-circle-down dataPickerIcon" aria-hidden="true"
                title="Click to add below"></i>
            </td>
        </tr>
    </table>
</div>
<hr>
<div class="col-md-6 col-sm-6 col-xs-11 currentToolsCol" id="projectdataColumn">
    <h2 class="viewHeader">Project Data</h2>
    <hr class="viewHeaderHR">
    <div id="projectDataContent">
    </div>
</div>

<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://use.fontawesome.com/3aed4d9ed5.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
></script>

方法1： 所以我将从我的应用程序中的工作开始 - 当我使用整个$(document).on(方式设置一个监听器时：

$(document).on('click', '.dataPickerIconDiv', function() {
    console.log("caught the click")
    $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p><hr>");
});

按预期正常工作。我点击它，然后将信息添加到目标div。

方法2： 但是，根据我的理解，我应该能够在main.js文件中执行以下任一操作：

$(document).ready(function () {
   $('.dataPickerIcon').click( function() {
     console.log("caught the click")
     $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p>
        <hr>");
      });
   })
}

方法3： 甚至只是：

$('.dataPickerIcon').click( function() {
     console.log("caught the click")
     $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p>
        <hr>");
  });

但唯一一次记录了“抓住点击” - 告诉我它甚至没有注册其他两个。这里发生了什么事？为什么我不能使用document不是第一个选择器的其他两个函数？

我还为JSfiddle进行了可视化 - 但即使使用了工作，它也无法正常工作。

Answer 1

• code.jquery.com CDN使用 https 协议（您正在使用http）。
• 方法2在末尾有一个额外的括号，并且在前置内容中有一些间距（可能是在这里粘贴代码段）。

将是：

//Method 2
$(document).ready(function() {
  $('.dataPickerIcon').click(function() {
    console.log("caught the click");
    $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p><hr>");
  });
});

• 方法3与前置内容中的间距相同。

将是：

//Method 3
$('.dataPickerIcon').click(function() {
  console.log("caught the click")
  $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p><hr>");
});

• 您可以在结束</body>代码前加载 main.js 文件。

使用前两种方法的工作片段（第三种方法也经过测试，但由于帖子内容的长度而无法包含它）。

方法1：

＆＃13;

＆＃13;

//Method 1
$(document).on('click', '.dataPickerIconDiv', function() {
  console.log("caught the click")
  $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p><hr>");
});

＆＃13;

html {
  height: 100%;
}

body {
  background: black;
  background-size: cover;
  color: white;
}

@font-face {
  font-family: 'animal-fantastic';
  src: url(../fonts/animalesfantastic.otf);
}

a {
  color: white;
}

a.links {
  color: #00faff;
}

#regHeader,
#loginHeader {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 350%;
}

#regHR,
#logHR {
  margin-top: 10px;
  margin-bottom: 10px;
}

.content {
  text-align: center;
  padding-top: 15%;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFF;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-nav li a {
  color: white;
}

.navbar {
  background-color: rgba(22, 116, 141, .7);
  color: white;
  border-bottom: 5px solid white;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.1em;
  letter-spacing: 1px;
}

.navbar-brand {
  font-family: 'animal-fantastic';
}

.nav .navbar-nav .navbar-right {
  padding-right: 21%;
}

h1 {
  font-weight: 700;
  font-size: 4.5em;
  font-family: 'animal-fantastic';
}

h3 {
  font-family: 'Ubuntu', sans-serif;
}

.icon-bar {
  color: white;
}

hr {
  width: 30%;
  border-top: 1px solid #f8f8f8;
  border-bottom: 4px solid rgba(0, 0, 0, 0.4),
}

#loginform,
#registrationForm {
  text-align: left;
  margin-top: 10%;
  padding: 2%;
  background-color: rgba(22, 116, 141, .4);
  border: 3px solid white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

label {
  letter-spacing: 1px;
}

.btn-lg,
#loginButton {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
  color: white;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
}

.col-centered {
  float: none;
  margin: 0 auto;
}

.appDataTable {
  text-align: center;
  width: 95%;
  border-radius: 7px;
}

.appTableHeaderRow th {
  background-color: rgba(6, 47, 55, .9);
  text-transform: uppercase;
  text-align: center;
  font-size: 1.1em;
  border: 3px solid white;
  border-radius: 7px;
  height: 20px;
}

.appDataTable tr td {
  border: 3px solid white;
}

body {
  font-family: 'Ubuntu', sans-serif;
}

#toolbarColumn {
  border: 5px solid rgba(255, 255, 255, .8);
  border-radius: 7px;
  padding: 0;
  background: rgba(23, 137, 159, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
}

#toolbarColumn,
#toolbarColumn * {
  box-sizing: content-box;
}

ul.dropdown-menu {
  border: 2px double white;
  background-color: rgb(41, 101, 116);
  cursor: pointer;
  cursor: hand;
  margin-top: 3px;
  padding: 10px;
}

ul.dropdown-menu li {
  padding-top: 5px;
  padding-bottom: 5px;
}

ul.dropdown-menu li:hover {
  background-color: rgb(28, 68, 78);
}

li.dropdown,
#toolbarheader {
  border-bottom: 4px solid rgba(255, 255, 255, .8);
}

li.dropdown:last-child {
  border: 0;
}

#toolbarheader {
  text-align: center;
  font-size: 1.3em;
  font-weight: 500;
  margin: auto;
  padding: 15px 0px 7px 0px;
  max-height: 33px;
  min-height: 33px;
}

#projectViewTitle {
  margin-top: 5%;
  text-align: center;
}

.actionDeniedContainer {
  margin-top: 15%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#toolOptions {
  margin-top: 1%;
  height: 47%;
}

#currentTools {
  height: 50%;
  margin-top: 3px;
  padding-top: 1%;
  width: 100%;
}

#toolOptions {
  margin-left: auto;
  margin-right: auto;
  width: 99%;
  padding-top: 1%;
}

.fromLoadDoc {
  border: 4px double white;
  border-radius: 15px;
  background-color: rgba(57, 141, 162, .8);
}

.toolOptionsHeaderRow {
  text-align: center;
  margin: 0px;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
  border-bottom: 4px double white;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
}

.tooltitles {
  margin: 0px 2px 2px 2px;
}

.toolSubtitles {
  margin: 2px;
  font-size: 15px;
}

.currentToolsCol {
  padding: .5%;
}

#projectdataColumn {
  margin-right: 10px;
  margin-left: 10px;
}

.workrow {
  margin: 5px 10px 5px 10px;
}

.importButton {
  min-height: 50px;
}

.toolTextInputBox {
  background-color: rgba(33, 79, 89, .8);
  width: 100%;
}

#newDataUploadRow {
  font-size: 1.2em;
  width: 80%;
}

#currentToolsRow {
  margin: 0;
}

.viewHeader {
  text-align: center;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
  margin: 5px;
}

hr.viewHeaderHR {
  margin-top: 5px;
  margin-bottom: 5px;
}

.singleNoteBox {
  border-top: dashed 3px white;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

#notebodydivider {
  margin: 5px;
  width: 80%;
  height: 3px;
}

#noteHeading {
  text-align: left;
}

fixeddesc {
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.2em;
}

#notesLoadZone {
  text-align: left;
  margin: 0;
  padding: 0;
}

#notesColumn.col-md-4 {
  max-width: 31%;
  float: right;
}

.actionDeniedContainerSmall {
  text-align: center;
}

#projectdataColumn {
  background-color: rgba(11, 87, 102, .8);
  box-shadow: 3px 3px 8px #06323a inset;
  border-radius: 7px;
}

#projectdataColumn.col-md-6 {
  width: 49%;
}

#workspaceNoteSlider {
  height: 100%;
  display: flex;
  padding-top: 2%;
}

#noteSliderHeader {
  margin-top: auto;
  margin-bottom: auto;
  height: 100%;
}

#dataPickerTable {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

#userProjectsSelectors {
  margin-top: 10%;
}

i.fa {
  border: 2px solid white;
  border-radius: 3px;
  margin: 1%;
  padding: 3px;
  font-size: 1.6em;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

i.sliderMainbutton {
  float: left;
}

i+h3 {
  display: inline-block;
}

#projSlidersHeader,
.sliderHeaderRow {
  border-bottom: 5px double white;
  text-align: center;
  font-family: animal-fantastic;
  margin: 0px;
  padding-top: 15px;
  padding-bottom: 7px;
  background: rgba(23, 137, 159, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
}

#allSlidersContainer,
.sliderContainer {
  border: 5px double white;
  border-radius: 10px;
  padding: 0%;
}

.appSliders,
.dashbutton {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
}

.appSliderContent {
  text-align: center;
  padding: 2%;
  background-color: rgba(11, 87, 102, .8);
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

.dashbutton {
  color: white;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
}

.appSliders:hover {
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#projleadSlider,
#projCollabSlider {
  border-bottom: 4px solid white;
}

.sliderTextInputBox {
  background: rgba(6, 47, 55, .9);
  width: 100%;
}

#newProjectTitleRow {
  float: left;
}

#createProjectForm {
  margin: 5px;
}

.userProjectsTable {
  text-align: center;
  width: 95%;
  border-radius: 7px;
}

.userProjectsHeaderRow th {
  background-color: rgba(6, 47, 55, .9);
  text-transform: uppercase;
  text-align: center;
  font-size: 1.1em;
  border: 3px solid white;
  border-radius: 7px;
  height: 20px;
}

.userProjectsTable tr td {
  border: 3px solid white;
}

.tableIcon {
  background: rgba(23, 137, 159, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
  ;
}

.tableIcon:hover {
  cursor: pointer;
  background: rgb(23, 170, 159);
}

＆＃13;

<div class="row workrow">
  <table class="appDataTable" id="dataPickerTable">
    <tr class="appTableHeaderRow" id="dataPickerTableHeaderRow">
      <th>Character</th>
      <th>Weapon</th>
      <th>Add Below</th>
    </tr>
    <tr class="appTableContentRow">
      <td>Boba Fett</td>
      <td>Blaster</td>
      <td class="dataPickerIconDiv">
        <i class="fa fa-arrow-circle-down dataPickerIcon" aria-hidden="true" title="Click to add below"></i>
      </td>
    </tr>
  </table>
</div>
<hr>
<div class="col-md-6 col-sm-6 col-xs-11 currentToolsCol" id="projectdataColumn">
  <h2 class="viewHeader">Project Data</h2>
  <hr class="viewHeaderHR">
  <div id="projectDataContent">
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://use.fontawesome.com/3aed4d9ed5.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

方法2：

＆＃13;

＆＃13;

//Method 2
$(document).ready(function() {
  $('.dataPickerIcon').click(function() {
    console.log("caught the click");
    $("#projectDataContent").prepend("<p>Appears below 'Project Data'</p><hr>");
  });
});

＆＃13;

html {
  height: 100%;
}

body {
  background: black;
  background-size: cover;
  color: white;
}

@font-face {
  font-family: 'animal-fantastic';
  src: url(../fonts/animalesfantastic.otf);
}

a {
  color: white;
}

a.links {
  color: #00faff;
}

#regHeader,
#loginHeader {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 350%;
}

#regHR,
#logHR {
  margin-top: 10px;
  margin-bottom: 10px;
}

.content {
  text-align: center;
  padding-top: 15%;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFF;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-nav li a {
  color: white;
}

.navbar {
  background-color: rgba(22, 116, 141, .7);
  color: white;
  border-bottom: 5px solid white;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.1em;
  letter-spacing: 1px;
}

.navbar-brand {
  font-family: 'animal-fantastic';
}

.nav .navbar-nav .navbar-right {
  padding-right: 21%;
}

h1 {
  font-weight: 700;
  font-size: 4.5em;
  font-family: 'animal-fantastic';
}

h3 {
  font-family: 'Ubuntu', sans-serif;
}

.icon-bar {
  color: white;
}

hr {
  width: 30%;
  border-top: 1px solid #f8f8f8;
  border-bottom: 4px solid rgba(0, 0, 0, 0.4),
}

#loginform,
#registrationForm {
  text-align: left;
  margin-top: 10%;
  padding: 2%;
  background-color: rgba(22, 116, 141, .4);
  border: 3px solid white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

label {
  letter-spacing: 1px;
}

.btn-lg,
#loginButton {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
  color: white;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
}

.col-centered {
  float: none;
  margin: 0 auto;
}

.appDataTable {
  text-align: center;
  width: 95%;
  border-radius: 7px;
}

.appTableHeaderRow th {
  background-color: rgba(6, 47, 55, .9);
  text-transform: uppercase;
  text-align: center;
  font-size: 1.1em;
  border: 3px solid white;
  border-radius: 7px;
  height: 20px;
}

.appDataTable tr td {
  border: 3px solid white;
}

body {
  font-family: 'Ubuntu', sans-serif;
}

#toolbarColumn {
  border: 5px solid rgba(255, 255, 255, .8);
  border-radius: 7px;
  padding: 0;
  background: rgba(23, 137, 159, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
}

#toolbarColumn,
#toolbarColumn * {
  box-sizing: content-box;
}

ul.dropdown-menu {
  border: 2px double white;
  background-color: rgb(41, 101, 116);
  cursor: pointer;
  cursor: hand;
  margin-top: 3px;
  padding: 10px;
}

ul.dropdown-menu li {
  padding-top: 5px;
  padding-bottom: 5px;
}

ul.dropdown-menu li:hover {
  background-color: rgb(28, 68, 78);
}

li.dropdown,
#toolbarheader {
  border-bottom: 4px solid rgba(255, 255, 255, .8);
}

li.dropdown:last-child {
  border: 0;
}

#toolbarheader {
  text-align: center;
  font-size: 1.3em;
  font-weight: 500;
  margin: auto;
  padding: 15px 0px 7px 0px;
  max-height: 33px;
  min-height: 33px;
}

#projectViewTitle {
  margin-top: 5%;
  text-align: center;
}

.actionDeniedContainer {
  margin-top: 15%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#toolOptions {
  margin-top: 1%;
  height: 47%;
}

#currentTools {
  height: 50%;
  margin-top: 3px;
  padding-top: 1%;
  width: 100%;
}

#toolOptions {
  margin-left: auto;
  margin-right: auto;
  width: 99%;
  padding-top: 1%;
}

.fromLoadDoc {
  border: 4px double white;
  border-radius: 15px;
  background-color: rgba(57, 141, 162, .8);
}

.toolOptionsHeaderRow {
  text-align: center;
  margin: 0px;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
  border-bottom: 4px double white;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
}

.tooltitles {
  margin: 0px 2px 2px 2px;
}

.toolSubtitles {
  margin: 2px;
  font-size: 15px;
}

.currentToolsCol {
  padding: .5%;
}

#projectdataColumn {
  margin-right: 10px;
  margin-left: 10px;
}

.workrow {
  margin: 5px 10px 5px 10px;
}

.importButton {
  min-height: 50px;
}

.toolTextInputBox {
  background-color: rgba(33, 79, 89, .8);
  width: 100%;
}

#newDataUploadRow {
  font-size: 1.2em;
  width: 80%;
}

#currentToolsRow {
  margin: 0;
}

.viewHeader {
  text-align: center;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
  margin: 5px;
}

hr.viewHeaderHR {
  margin-top: 5px;
  margin-bottom: 5px;
}

.singleNoteBox {
  border-top: dashed 3px white;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

#notebodydivider {
  margin: 5px;
  width: 80%;
  height: 3px;
}

#noteHeading {
  text-align: left;
}

fixeddesc {
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.2em;
}

#notesLoadZone {
  text-align: left;
  margin: 0;
  padding: 0;
}

#notesColumn.col-md-4 {
  max-width: 31%;
  float: right;
}

.actionDeniedContainerSmall {
  text-align: center;
}

#projectdataColumn {
  background-color: rgba(11, 87, 102, .8);
  box-shadow: 3px 3px 8px #06323a inset;
  border-radius: 7px;
}

#projectdataColumn.col-md-6 {
  width: 49%;
}

#workspaceNoteSlider {
  height: 100%;
  display: flex;
  padding-top: 2%;
}

#noteSliderHeader {
  margin-top: auto;
  margin-bottom: auto;
  height: 100%;
}

#dataPickerTable {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

#userProjectsSelectors {
  margin-top: 10%;
}

i.fa {
  border: 2px solid white;
  border-radius: 3px;
  margin: 1%;
  padding: 3px;
  font-size: 1.6em;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

i.sliderMainbutton {
  float: left;
}

i+h3 {
  display: inline-block;
}

#projSlidersHeader,
.sliderHeaderRow {
  border-bottom: 5px double white;
  text-align: center;
  font-family: animal-fantastic;
  margin: 0px;
  padding-top: 15px;
  padding-bottom: 7px;
  background: rgba(23, 137, 159, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
}

#allSlidersContainer,
.sliderContainer {
  border: 5px double white;
  border-radius: 10px;
  padding: 0%;
}

.appSliders,
.dashbutton {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
}

.appSliderContent {
  text-align: center;
  padding: 2%;
  background-color: rgba(11, 87, 102, .8);
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

.dashbutton {
  color: white;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
}

.appSliders:hover {
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#projleadSlider,
#projCollabSlider {
  border-bottom: 4px solid white;
}

.sliderTextInputBox {
  background: rgba(6, 47, 55, .9);
  width: 100%;
}

#newProjectTitleRow {
  float: left;
}

#createProjectForm {
  margin: 5px;
}

.userProjectsTable {
  text-align: center;
  width: 95%;
  border-radius: 7px;
}

.userProjectsHeaderRow th {
  background-color: rgba(6, 47, 55, .9);
  text-transform: uppercase;
  text-align: center;
  font-size: 1.1em;
  border: 3px solid white;
  border-radius: 7px;
  height: 20px;
}

.userProjectsTable tr td {
  border: 3px solid white;
}

.tableIcon {
  background: rgba(23, 137, 159, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */
  inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */
  inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */
  inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */
  inset 0 -15px 30px rgba(0, 0, 0, 0.3);
  /* Dark Background */
  ;
}

.tableIcon:hover {
  cursor: pointer;
  background: rgb(23, 170, 159);
}

＆＃13;

<div class="row workrow">
  <table class="appDataTable" id="dataPickerTable">
    <tr class="appTableHeaderRow" id="dataPickerTableHeaderRow">
      <th>Character</th>
      <th>Weapon</th>
      <th>Add Below</th>
    </tr>
    <tr class="appTableContentRow">
      <td>Boba Fett</td>
      <td>Blaster</td>
      <td class="dataPickerIconDiv">
        <i class="fa fa-arrow-circle-down dataPickerIcon" aria-hidden="true" title="Click to add below"></i>
      </td>
    </tr>
  </table>
</div>
<hr>
<div class="col-md-6 col-sm-6 col-xs-11 currentToolsCol" id="projectdataColumn">
  <h2 class="viewHeader">Project Data</h2>
  <hr class="viewHeaderHR">
  <div id="projectDataContent">
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://use.fontawesome.com/3aed4d9ed5.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;