Javascript <a> 标记上的 Jquery 单击事件未正确触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13859159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery click event on <a> tag not firing properly
提问by R4VANG3R
I'm trying to catch the jquery click event on an tag with a class, but its not firing.
我试图在带有类的标签上捕获 jquery 单击事件，但它没有触发。
HTML: (there's 10 blocks)
HTML：（有 10 个块）
<div id="block1">
<div class="slideshow">
<a class="popup" href="#imgform">
<img src="<?php echo 'core/controllers/foto.php?o=1'; ?>" title="1" width="271px" height="413px">
</a>
</div>
</div>
<div id="block2">
<div class="slideshow">
<a class="popup" href="#imgform">
<img src="<?php echo 'core/controllers/foto.php?o=2'; ?>" title="2" width="200px" height="129px">
</a>
</div>
</div>
jQuery:
jQuery：
$(document).ready(function() {
var $popup = $('a.popup');
$popup.live('click',function(){
var id = $popup.parent().parent().attr('id');
id = id.substring(5);
alert(id);
$.get('index.php?o='+id, function(data) {
$popup.fancybox({
//do stuff
});
});
});
});
The alert is always returning 1 for some reason.
由于某种原因，警报总是返回 1。
采纳答案by Swarne27
Try this,
尝试这个，
$('a.popup').on('click',function(){
alert($(this).parent().parent().attr('id')); // to check whether it is firing....
});
回答by Alexander
This may help you.
这可能对你有帮助。
- Use
.on()as of jQuery 1.7. - Make use of the
dataparameter in your AJAX calls this may ensure proper escaping of the query parameters. If you still insist doing it manually you can use$.param. - In your specific case you can cache lot of things. Although, this may not work for dynamically added elements after loading is complete.
- 使用
.on()在jQuery 1.7。 data在 AJAX 调用中使用参数，这可以确保正确转义查询参数。如果您仍然坚持手动执行此操作，则可以使用$.param.- 在您的特定情况下，您可以缓存很多东西。虽然，这可能不适用于加载完成后动态添加的元素。
$(document).ready(function() {
$('a.popup').each(function() {
var $this = $(this);
var id = $this.parent().parent().attr('id').substring(5);
$this.click(function() {
$.get('index.php', {
o: id
}, function(data) {
$popup.fancybox({
//do stuff
});
});
});
});
});?
Moreover, using data-*attributes you can easily drop the idattribute parsing and have a cleaner markup.
此外，使用data-*属性，您可以轻松删除id属性解析并拥有更清晰的标记。
- Using a
blockclassname. - Adding a
data-block-idattribute. - You should definitely be using classnames to style elements and not IDs.
- 使用
block类名。 - 添加一个
data-block-id属性。 - 您绝对应该使用类名来设计元素而不是 ID。
<div class="block" data-block-id="1">
<div class="slideshow">
<a class="popup" href="#imgform">
<img src="<?php echo 'core/controllers/foto.php?o=1'; ?>" title="1" width="271px" height="413px">
</a>
</div>
</div>
$(document).ready(function() {
$('a.popup').each(function() {
var $this = $(this);
var id = $this.parent().parent().data("block-id");
$this.click(function() {
$.get('index.php', {
o: id
}, function(data) {
$popup.fancybox({
//do stuff
});
});
});
});
});?
回答by Champ
use this
用 this
$(document).ready(function() {
$('a.popup').on('click',function(){
var id = $(this).parent().parent().attr('id');
id = id.substring(5);
alert(id);
});
});
回答by user1699308
You can use
您可以使用
$(document).on("click", "$popup", function() {
var id = $popup.parent().parent().attr('id');
id = id.substring(5);
alert(id);
$.get('index.php?o='+id, function(data) {
$popup.fancybox({
//do stuff
});
});
回答by Boniface Lazarus
I was having similar problem where i wasnt able to get i click I tried on() its better than live().
我遇到了类似的问题，我无法点击我试过（）它比 live（）更好。
Check this link for more http://api.jquery.com/on/In this page check out the last three examples at the end of the page you might get a better solution.
查看此链接以获取更多信息http://api.jquery.com/on/在此页面中查看页面末尾的最后三个示例，您可能会得到更好的解决方案。
回答by Akhil Sekharan
Use:
用：
$(document).ready(function() {
var $popup = $('a.popup');
$popup.live('click',function(){
var element = $(this);
var id = element.closest('[id^="block"]').attr('id');
id = id.substring(5);
alert(id);
$.get('index.php?o='+id, function(data) {
element.fancybox({
//do stuff
});
});
});
});
If you are on jQuery 1.7 +, Use:
如果您使用的是 jQuery 1.7 +，请使用：
$(document).on('click', 'a.popup' ,function(){
//do Stuff
});
回答by Aesthete
I think you want to bind the click callback to your links. You'll also probably want to prevent the default behaviour, otherwise your page will reload.
我认为您想将点击回调绑定到您的链接。您可能还想阻止默认行为，否则您的页面将重新加载。
$(".popup").click(function(){
var id = $(this).parent().parent().attr('id')[5];
alert(id);
});?
Also, using classes effectively could cut out most of those parentcalls, before they get out of hand. For example.
此外，有效地使用类可以parent在它们失控之前切断大部分调用。例如。
<!-- Make the head div belong to class "head" -->
<div id="block1" class="head">
<div class="slideshow">
<a class="popup" href="#imgform">
$(".popup").click(function(){
// If you click the first link, you'll get "block1" in the alert.
var id = $(this).parents(".head").attr('id');
alert(id);
});?
回答by sphair
In you event handler, you need to use the event that was actually clicked.
在您的事件处理程序中，您需要使用实际单击的事件。
$('a.popup').click(function() {
var $id = $(this).parent().parent().attr('id');
...
});
Please note that as of jQuery 1.7, the .live() method is deprecated. Use .on() or .click() to attach event handlers.
请注意，从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 或 .click() 附加事件处理程序。
