如何在包含html中使用jquery？

Question

抱歉标题...... 所以我将index.html分成了div，然后我使用：

调用了这个

<script>$(function(){$("#work_bunch").load("wb.html"); });</script>

它工作正常，但我不会在wb.html中的元素上使用jquery 我在索引中使用了这个：

<script type="text/javascript" src="java_scripts/wb_op.js"></script>

我在.js文件中编写的内容似乎在索引中正常工作 但是我无法选择wb.html

中的任何元素 例如

（如果img5是元素wb.html）：

$("#img5").mouseover(function(){
  $(img5).fadeOut(2000);
});

Answer 1

您需要使用事件委派：

$(document).on('mouseover', '#element_in_wb_page', function() {
    // your function
});

在你的情况下：

$(document).on('mouseover', '#img5', function() {
    $(this).fadeOut(2000);
});

Answer 2

如果动态添加内容，请使用委托方法on

$("#work_bunch").on("mouseover", "#img5", (function(){
  $(this).fadeOut(2000);
});

并将错误问题$(img5)发送至$("#img5")

Answer 3

如果您在头标记中包含.js，则需要使用document.ready()

$(document).ready(function() {
 $("#img5").mouseover(function(){
  $(this).fadeOut(2000);
  });
});

Answer 4

委派活动：

$("#work_bunch").on("mouseover", "#img5", function(){
    $(this).fadeOut(2000);
});

---

当DOM准备就绪时，你的元素不在那里，然后他们会进入视野，所以在DOM准备好时，所有事件都绑定到现有元素。如果动态生成任何元素或通过ajax将任何事件放入视图中，则任何事件都不会绑定到它们。

因此，解决此问题的方法是尝试尽可能将事件委托给最近的静态父级，尽管您也可以委托给document，但在查找dom元素时这样做很昂贵。

解释语法：

$(parentToDelegate).on(event, selector, callbackFn);

Answer 5

这是我发现更一般的解决方案 使用

$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
});

而不是

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
});

<强>因为： - 加载HTML文档时，文档就绪事件已经执行。 - 完整页面完全加载后，窗口加载事件会稍后执行，包括所有帧，对象和图像。