Can only use $(document).on(...) for all JQuery Calls

Question

newbie to Jquery, but having issues understanding how it works. Specifically, I'm trying to set up an event listener on an i element with a class .dataPickerIcon which responds to a click, prepend()-ing some more HTML into a target ` ". Here's the 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>

Method 1: So I'll start with what DOES work in my application - when I set up a listener using the whole $(document).on( way of doing things:

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

It works just fine, as expected. I click it and it adds the information into the targeted div.

Method 2: However, from my understanding, I should be able to do either of these as well in my main.js file:

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

Method 3: Or even just:

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

But the only time the "caught the click" is logged - telling me it's not even registering the other two. What's happening here? Why can't I use the other two functions where document isn't the first selector?

I've also made a JSfiddle for visualization- but it doesn't really work, even with the working one.

The JSFiddle works. Just add jQuery from the cog menu in the javascript section. — lxe, Aug 10 '17 at 22:42
I included jQuery and your other scripts and your code [seems to work](https://jsfiddle.net/caaqayfd/4/). Where in your document do you load your JavaScript? Before or after including jQuery? Finding any JavaScript errors in the console? For more reference, see [$( document ).ready()](https://learn.jquery.com/using-jquery-core/document-ready/) and [direct and delegated events](http://api.jquery.com/on/#direct-and-delegated-events). — showdev, Aug 10 '17 at 22:42
`aria-hidden="true"` - so the tag itself is not shown on the page (just the #before content). — James, Aug 10 '17 at 22:45

Syden · Answer 1 · 2017-08-15T13:13:52.370

code.jquery.com CDN uses https protocol (you are using http).
Method 2 has an extra bracket at the end and some spacing inside of prepend content (likely from pasting the snippet here).

Would be:

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

Method 3 same with the spacing in prepend content.

Would be:

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

You can load your main.js file last before your closing </body> tag.

Working snippets with first 2 methods, (3rd was tested as well but couldn't include it due to post content length).

Method 1:

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

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

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

Method 2:

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

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

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

This does work here, but can you explain why? Why did you throw the jquery reference at the top? And when should I reference my external `main.js` file? — NateH06, Aug 15 '17 at 09:29
Thanks, that does make a bit more sense. Without pasting up a whole bunch of extra code, I still can't get #2 or #3 to work within the context of my application. No clicks are ever caught. But - and I apologize this may have been crucial to note earlier- the HTML I've posted above (except the scripts at the bottom) is brought into a div in an already-loaded page via an AJAX call itself - so when it's loaded in context, the provided script lines have been long since loaded. Does this make a difference? — NateH06, Aug 15 '17 at 14:26
NateH06, with ajax calls it matters where you are loading scripts but couldn't say without looking at the actual code, please create a fiddle with the relevant code and share it on a comment, even if some it's loaded via ajax and won't work in the fiddle, just for demonstration and I'll make sure to check it and see if I can help you. Also, if you consider best, feel free to share image links, an url or whatever, thank you. — Syden, Aug 15 '17 at 19:29
It's really a simple AJAX call - but I've created a new fiddle to demonstrate here: https://jsfiddle.net/8ha6zaxa/ . Though it doesn't actually run to show the dynamically loaded piece, of course. Can you elaborate on this: "code.jquery.com CDN uses https protocol (you are using http)." ? I am using some Jquery here, why is it working if I'm using HTTP? — NateH06, Aug 16 '17 at 07:56
I'm wondering if it's something similar to the issue faced here: https://stackoverflow.com/questions/15090942/event-handler-not-working-on-dynamic-content As I have other elements which are also dynamically loaded into a page, and if they themselves need to make jquery calls, the only time I can get their jquery calls to respond is if in my `main.js`, the method begins with `$(document). ...` such as `$(document).on('submit', '#createProjectForm', function (event) {` or `$(document).ready(function () {` — NateH06, Aug 16 '17 at 08:11
Nate, first question, you may be using a CDN other than https://code.jquery.com ? This is how their CDN is served. In regards to 2nd question, it is working on the fiddle (the last method), so it's something with your app. In your fiddle `#projectDataContent` is modified by the ajax call, which is the same container you are prepending with the click event, so there may be a conflict there. Does the click event work previously to triggering the ajax call or doesn't work prior to the call anyways? — Syden, Aug 16 '17 at 13:17
I definitely am using the first uncompressed version of Jquery from the link you posted, it's stored locally in my app itself (I need to develop offline frequently). And I just noticed a typo in the AJAX call as I had written it, it shouldn't have targeted `#projectDataContent` but `toolsrow` instead. The targeted area should have been a different place, so I don't think there's a conflict. Updated here: https://jsfiddle.net/8ha6zaxa/4/ — NateH06, Aug 16 '17 at 13:26

Can only use $(document).on(...) for all JQuery Calls

1 Answers1