Question

我正在尝试在带有类的标记上捕获jquery click事件，但它没有触发。

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

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

由于某种原因，警报总是返回1.

Answer 1

试试这个，

$('a.popup').on('click',function(){
  alert($(this).parent().parent().attr('id')); // to check whether it is firing....
});

Answer 2

这可能会对你有帮助。

从jQuery 1.7开始使用.on()。
在AJAX调用中使用data参数，这可以确保正确转义查询参数。如果您仍然坚持手动执行此操作，则可以使用$.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
                });
            });
        });
    });
});

此外，使用data-*属性，您可以轻松删除id属性解析并获得更清晰的标记。

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

Answer 3

使用this

$(document).ready(function() {
    $('a.popup').on('click',function(){
        var id = $(this).parent().parent().attr('id');
        id = id.substring(5);
        alert(id);
   });
});

Answer 4

我认为您想将点击回调绑定到您的链接。您也可能希望阻止默认行为，否则您的页面将重新加载。

$(".popup").click(function(){
    var id = $(this).parent().parent().attr('id')[5];
    alert(id);
});

此外，有效使用类可以在失控之前删除大多数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);
});

Answer 5

在您的事件处理程序中，您需要使用实际单击的事件。

$('a.popup').click(function() {
  var $id = $(this).parent().parent().attr('id');
  ...
});

请注意，从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）或.click（）来附加事件处理程序。

Answer 6

使用：

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

如果您使用的是jQuery 1.7 +，请使用：

    $(document).on('click', 'a.popup' ,function(){ 
        //do Stuff
    });

Answer 7

我有类似的问题，我无法点击我试过（）它比live（）更好。

查看此链接了解更多http://api.jquery.com/on/在此页面中，查看页面末尾的最后三个示例，您可能会获得更好的解决方案。

Answer 8

您可以使用

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

});

<a> tag not firing properly</a>上的Jquery点击事件

8 个答案: