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 被正确检索。

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

4

1 回答 1

3

那是因为当您在第二种变体情况下单击时，您实际上是在单击图像，然后单击事件传播到封闭a元素，因此当您打印时，event.target.id您试图访问id不存在的图像，并且所以你得到一个空字符串。

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

alert(event.target.tagName);

那应该给你IMG。

要访问第二个变体案例id中的a元素，只需执行$(this).attr('id')

于 2012-10-09T12:00:58.687 回答