将事件添加到jQuery

有人能告诉我为什么我不能单独添加处理程序，而是必须执行下面的操作才能使其工作？将事件添加到jQuery

我的问题是为什么我应该添加隐藏$(document).ready()以使其工作的段落的代码。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    alert('test'); 
}); 
</script> 
<script> 
$("p").click(function(){ 
     $(this).hide(); 
    }); 
    </script> 
</head> 
<body> 

<p>If you click on me, I will disappear.</p> 
<p>Click me away!</p> 
<p>Click me too!</p> 

</body> 
</html>

工作代码 -

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("p").click(function(){ 
     $(this).hide(); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>If you click on me, I will disappear.</p> 
<p>Click me away!</p> 
<p>Click me too!</p> 

</body> 
</html>

来源

2017-02-28 Aaron Wilfred

敢肯定这是因为DOM是不是在装 –

在第一代码片段中没有定义点击事件document.ready函数 – Maharshi

还有另外一个可以工作的选项：将JS放在主体的末尾，放在要尝试引用的元素之后。 – nnnnnn

第一个片段中的问题是在加载文档之前注册的jQuery代码，所以它不会识别任何HTML元素。因此它不会工作。

解决方案： -

1.Either把你的代码在页面的底部（在第一个的情况下）。

2.或者你已经在第二个代码中完成你的代码（$(document).ready(function(){..});）。

在这两种情况下，上面的HTML元素正确加载和jQuery代码之前注册的，因此您的代码将开始工作

来源

2017-02-28 04:18:22

其更改如下..

$(document).ready(function(){ 
 
    alert('test'); 
 
    $("p").click(function(){ 
 
     $(this).hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p>If you click on me, I will disappear.</p> 
 
<p>Click me away!</p> 
 
<p>Click me too!</p>

来源

2017-02-28 04:10:47 Maharshi

这不是OP在第二个例子中*已经在做什么吗？他们问为什么第一种方式失败，第二种方式起作用。 – nnnnnn

我给他的代码。开发人员可以了解其差异。 – Maharshi

*“我的问题是为什么我应该在$（document）.ready（）中添加用于隐藏段落的代码以使其工作。”* - 您甚至没有试图回答这个问题，并且显示的代码看起来与OP说他已经有效，但是增加了警报。 – nnnnnn

$(documet).ready(function(){})只在页面解析，不论地点的所有DOM elements后执行。当你编写没有ready函数的代码时，代码将按顺序执行。如果JavaScript代码放在DOM元素外观之前，它将不起作用。如果你把（第一种情况） -

<script> 
$("p").click(function(){ 
    $(this).hide(); 
}); 
</script>

只是标记之前，它将按预期工作 - 以确保在页面解析的DOM元素利用$(documet).ready(function(){})。

来源

2017-02-28 04:16:03

这工作？ –

事件处理程序只能绑定到当前选择的元素;它们必须在您的代码调用'click'处理程序时存在。

你可以在以下几个方面实现：

包含在这始终是最佳做法的HTML的身体末端的脚本。
包装你的处理代码到一个函数，并调用内部的document.ready该功能（）或body.onload（）。 document.ready（）是首选，因为它不会等待图像等资源，并在HTML内容加载后立即附加事件。
使用委托事件来附加事件处理程序。委托事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。

我会做这样的：

(function(){ 
 
    $('p').on('click',function(){ 
 
    $(this).hide(); 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    alert('test'); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p>If you click on me, I will disappear.</p> 
 
<p>Click me away!</p> 
 
<p>Click me too!</p> 
 

 
<script src=""></script> 
 
</body> 
 
</html>

来源

2017-02-28 05:13:00

将事件添加到jQuery

回答

相关问题