IE7 不捕获 jQuery 点击子选择器答案

【问题标题】：IE7 not capturing jQuery click on child selectorIE7 不捕获 jQuery 点击子选择器
【发布时间】：2012-07-23 21:24:28
【问题描述】：

我的以下代码在 FF、Chrome、IE8/9 和 Safari 上按预期正确运行...但我无法捕获 IE7 上的“搜索提交”点击。

jQuery Documentation 声明 IE7 完全支持子选择器，但我无法以这种方式使用它们。相对定位有问题吗？

$(document).ready(function() {   
    $('#r_submit > #searchSubmit').click(function() {
       console.log('captured click of searchSubmit');
    });
});

我的 HTML 和 CSS：

<div id="r_submit">
   <a id="searchSubmit">Go</a>
</div>

#r_submit #searchSubmit {
    background: url("/images/picco/proceed_button.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 38px;
    width: 195px;
    border: none;
    position: relative;
    display: block;
    text-indent: -9999px;
    font-size: 0px;
    line-height: 0px;
    top:0px;
    left: 0px;
    float: left;
    cursor: pointer;
}

【问题讨论】：

您甚至没有在 CSS 中使用子选择器。我看到了后代选择器。
我在我的 CSS 中使用 position: relative。见上文。
没有充分的理由使用具有两个 ID 的选择器。只需使用$('#searchSubmit')
你的js在$(document).ready回调里面吗？
@Thomas 从点击调用中删除父选择器没有任何区别。没有任何内容写入控制台。

标签： jquery html css internet-explorer internet-explorer-7

【解决方案1】：

页面上只有一个具有给定 ID 的元素才有效，因此您的选择器可以是：

$('#searchSubmit').click(function() {
    console.log('captured click of searchSubmit');
});

如果内容是动态添加到页面的，“on”方法会处理这个：

$('#r_submit').on('click', '#searchSubmit', function() {
    console.log('captured click of searchSubmit');
});

【讨论】：

on 不会以您使用它的方式处理动态创建的元素。你必须使用委托。
你是 100% 正确的，谢谢。我在页面上有另一个#searchSubmit，虽然它在页面的另一个区域，我认为我的子选择器会解决这个问题，但这显然是 IE7 的问题。为了解决这个问题，我更新了使用 on 而不是 click 的调用，并更改了 div 的名称。值得庆幸的是，IE7 目前在全球范围内的使用率仅为 4%。