Javascript 只能对所有JQuery调用使用（…）上的$（document）

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>

正如预期的那样，它工作得很好。我单击它，它将信息添加到目标的

div

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

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

$（文档）.ready（函数（）{
$（'.dataPickerIcon'）。单击（函数（）{
log（“捕捉到点击”）
$（“#projectDataContent”）.prepend（出现在“项目数据”下面

”；
});
})
}

方法3: 甚至只是：

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

$（'.dataPickerIcon'）。单击（函数（）{
log（“捕捉到点击”）
$（“#projectDataContent”）.prepend（出现在“项目数据”下面

”；
});

但是唯一一次“点击被捕获”被记录下来的时候——告诉我它甚至没有注册其他两个。这里发生了什么？为什么我不能使用其他两个函数，而

文档

不是第一个选择器

我还为可视化做了一个新的尝试，但它并不真正起作用，即使是在工作的情况下。

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

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

性格
武器
加在下面
波巴·费特
爆破工

项目数据

JSFIDLE可以工作。只需从javascript部分的cog菜单添加jQuery。我包括了jQuery和其他脚本以及代码。您在文档中的何处加载javascript？包括jQuery之前还是之后？在控制台中查找任何javascript错误？有关更多参考，请参阅和。

aria hidden=“true”“

-因此标签本身不会显示在页面上（仅显示在内容之前）。这在这里确实有效，但您能解释一下原因吗？为什么要将jquery引用放在顶部？我什么时候应该引用我的外部

main.js

文件？NateH06，上面编辑的。谢谢，这确实有点道理。如果不粘贴一大堆额外的代码，我仍然无法在我的应用程序上下文中使用#2或#3。没有点击被捕捉到。但是-我很抱歉，这可能是之前必须注意的关键-我在上面发布的HTML（除了底部的脚本）通过AJAX调用本身被带到已加载页面中的一个div中-因此，当它在上下文中加载时，提供的脚本行早已加载。这有什么区别吗？NateH06，使用ajax调用，在加载脚本的地方很重要，但如果不查看实际代码，请创建一个相关代码的提琴，并在注释中共享，即使有些代码是通过ajax加载的，在提琴中无法工作，只是为了演示一下，我一定会检查一下，看看我能不能帮你。此外，如果你认为最好的，可以自由分享图像链接，URL或任何东西，谢谢。这真的是一个简单的Ajax调用-但我创造了一个新的小提琴来演示这里：当然，虽然它实际上并没有显示动态加载的片段。您能否详细说明一下：“code.jquery.com CDN使用https协议（您正在使用http）。”？我在这里使用一些Jquery，如果我使用HTTP，为什么它能工作？

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