Question

尝试让onclick事件在不同浏览器之间保持一致时，我遇到问题，当onclick覆盖已禁用的<select>时（使用jQuery 1.9.1）：

<html>
    <head>
        <title>Onclick</title>
        <script type="text/javascript" src="/RiO/Common/js/lib/jquery/jquery.min.js"></script>
        <script type="text/javascript">
            function clickme(s)
            {
                alert ("Hello! " + s);
            }

            function init()
            {
                $('#ie10').each(function() {
                    var ele = $(this);
                    onclicker = "clickme('" + ele.attr('id') + "');";
                    ele.wrap('<span onclick="' + onclicker + '">');
                });

                $('#ff').each(function() {
                    var ele = $(this);
                    ele.wrap('<span style="position:relative">');
                    ele.after($('<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>').on('click', function() { return clickme(ele.attr('id')); }));
                });
            }
        </script>
    </head>
        <body onload="init();">
        IE8/IE10 clickable: <span onclick="clickme('boo!');"><select id="ie8" disabled="true">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
        </select></span>
        <br />
        IE10 clickable: <select id="ie10" disabled="true">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
        </select>
        <br />
        Everything else clickable: <select id="ff" name="ff" disabled="true">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
        </select>
    </body>
</html>

从本质上讲，第一个绑定仅适用于IE10，第二个绑定适用于Firefox，Chrome和其他所有内容。理想情况下，我需要它回到IE8 - 我发现绑定IE8的唯一方法是硬编码跨度 - 试图用jQuery插入它失败。

然而，IE10和FF / Chrome的工作方式也不同，因为覆盖在IE中根本不起作用 - 就好像选择优先（并且因为禁用它会吞下任何点击）。

我也尝试过使用document.on（），如下所示：

$(document).on ('click', '.clicker', function(e) {
    e.preventDefault();
    return clickme("moo");
});

$('ie').wrap ('<span class="clicker">');

...它再次适用于IE10和FF（对于相应的span / overlay div），但也无法在IE8中工作。

由于这是动态生成的代码，我不想最终必须在底层业务逻辑中嗅探用户代理以创建正确的代码 - 但此刻我无法看到还有什么可做的。想法？

更新 IE主要似乎将事件绑定到动态添加的元素。如果我将一个事件绑定到一个现有元素（即，如果我总是将所有选择包装在一个中，那么$(span).on('click', ...)就可以了。所以有一条可能的路由前进，但我仍然希望IE和FF都有相同的解决方案保存代码重复（并从代码中删除一些复杂性），虽然我猜这不实用。

值得注意的是，它只是选择。如果select被替换为禁用的input文本框，那么我在浏览器之间有更可靠的行为：即，将元素包装在<span>中是浏览器之间工作所需的全部内容

Answer 1

我不确定为什么要围绕选项元素创建所有跨度。使用jQuery的onChange事件不是更容易吗？

http://jsfiddle.net/rsfxR/1/

$(document).on('change', '.change_selectbox',function() {
    alert( $(this).val() );
});

更新回复： jsfiddle.net/rsfxR/2

点击时激活选择框：

$('#myform *').filter(':input').each(function(){        
    if($(this).attr('disabled') == "disabled"){
        $(this).wrap("<span class='inactive'></span>"); 
    };
});

$(document).on('click', '.inactive', function(){
    $(this).children("select").prop('disabled',false);

    $(this).removeClass('inactive');
});

更新＃2：似乎Firefox在HTML中需要额外的<div>，所以这应该是完整的：

    $('#ie10').each(function() {
        var ele = $(this);
        ele.wrap ('<span class="clicker"></span>');
        ele.after ('<div></div>');
    });

其中<div>具有以下CSS：

    span.clicker > div {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

Answer 2

你说你试过on功能了吗？但你的功能似乎是错误的会是这样的：

$('#ie10').on('click', function() {
    clickme('User');
}

Answer 3

在触发onchange事件时填充它是否合适：

Javascript：

function populate(select)
{
    var option1=document.createElement("option");
    option1.text="One";
    var option2=document.createElement("option");
    option2.text="Two";
    var option3=document.createElement("option");
    option3.text="Three";
    select.options[0] = null;
    select.options.add(option1, null);
    select.options.add(option2, null);
    select.options.add(option3, null);
}

HTML：

<body>
Populated once clicked : 
<select id="sel1" name="sel1" onmousedown="populate(this)">
    <option>Disabled - Click to enable</option>
</select>
</body>

http://jsfiddle.net/8rtd9/

jQuery，onclick和disabled选择

3 个答案: