javascript - タグのJqueryクリックイベントが正しく発生しない

Answer 1

これを試して、

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

Answer 2

これはあなたを助けるかもしれません。

1. .on()jQuery 1.7 以降で使用します。
2. AJAX 呼び出しでパラメーターを使用するdataと、クエリ パラメーターが適切にエスケープされる可能性があります。それでも手動で行うことを主張する場合は、を使用できます$.param。
3. 特定のケースでは、多くのものをキャッシュできます。ただし、これは、ロードが完了した後に動的に追加された要素に対しては機能しない場合があります。

$(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 ではなく、クラス名を使用して要素のスタイルを設定する必要があります。

<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

live() よりも on() を試してみましたが、クリックできないという同様の問題がありました。

詳細については、このリンクを確認してください http://api.jquery.com/on/このページでは、ページの最後にある最後の 3 つの例を確認すると、より良い解決策が得られる可能性があります。

Answer 5

使用する：

$(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 6

使用できます

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

});

Answer 7

クリック コールバックをリンクにバインドしたいと思います。また、デフォルトの動作を防止したい場合もあるでしょう。そうしないと、ページがリロードされます。

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