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

时间:2012-12-13 11:46:33

标签: javascript jquery html events click

我正在尝试在带有类的标记上捕获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.

8 个答案:

答案 0 :(得分:3)

试试这个,

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

答案 1 :(得分:2)

这可能会对你有帮助。

  1. 从jQuery 1.7开始使用.on()
  2. 在AJAX调用中使用data参数,这可以确保正确转义查询参数。如果您仍然坚持手动执行此操作,则可以使用$.param
  3. 在您的具体情况下,您可以缓存很多东西。虽然,在加载完成后,这可能不适用于动态添加的元素。
  4. $(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属性解析并获得更清晰的标记。

    1. 使用block类名。
    2. 添加data-block-id属性。
    3. 你绝对应该使用类名来设置元素的样式而不是ID。
    4. <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
                      });
                  });
              });
          });
      });​
      

答案 2 :(得分:1)

使用this

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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

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

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

答案 5 :(得分:0)

使用:

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

答案 6 :(得分:0)

我有类似的问题,我无法点击我试过()它比live()更好。

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

答案 7 :(得分:0)

您可以使用

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

});