3

次のjQueryコードがあります：

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){
            jQuery('a.connect').bind("click", function(event)
            {
                    var str = event.target.id;
                    alert (str);
                    var uid = str.substring(str.indexOf("_") + 1);
                    //connect (uid);
            });
    });
</script>

次のHTMLを使用すると

<a class="connect button-small-blue" id="connect_{$uid}" href="#">Connect</a>

すべてがうまく機能します。しかし、私が使用するとき

<a class="connect" id="connect_{$uid}" href="#"><img src="{$imgSocialConnect}" alt="{$lblSocialConnect}" title="{$lblSocialConnect}" /></a>

alert(str) 呼び出しは空になります。

アラート呼び出しを次のように置き換えると、それがわかりました

alert (jQuery(this).attr('id') );

ID は正しく取得されます。

誰かがこれに光を当てて、2番目のHTMLバリアントが現在のようにjQuery関数で機能しない理由を教えてもらえますか?

4

1 に答える 1

3

これは、2 番目のバリアント ケースでクリックすると、実際には image をクリックしているためです。クリック イベントは囲んでいるa要素に伝播するため、 を印刷すると、存在しない画像のevent.target.idにアクセスしようとしています。idしたがって、空の文字列が得られます。

2番目のバリアントケースでこれを行うことでテストできます:

alert(event.target.tagName);

それはあなたにIMGを与えるはずです。

2 番目のバリアント ケースで要素の にアクセスするidには、次のようにします。a$(this).attr('id')

于 2012-10-09T12:00:58.687 に答える