Question

我有以下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>

警报（str）调用为空。

当我用

替换警报时，我才知道

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

正确检索ID。

任何人都可以对此有所了解并告诉我为什么第二个HTML变体不能像现在这样使用jQuery函数的原因是什么？

Answer 1

那是因为当您点击第二个变体案例时，您实际上是单击图像中的，然后单击事件会传播到封闭的a元素，因此当您打印{ {1}}您正在尝试访问不存在的图片的event.target.id，因此您会得到一个空字符串。

您可以在第二个变体案例中进行测试：

id

应该为您提供 IMG 。

要访问第二个变体案例中alert(event.target.tagName);元素的id，请执行a

jQuery事件绑定使用普通链接，但现在与图像链接

1 个答案: