Javascript jQuery、onclick和禁用的select_Javascript_Jquery_Cross Browser

Javascript jQuery、onclick和禁用的select

javascript jquery

Javascript jQuery、onclick和禁用的select,javascript,jquery,cross-browser,Javascript,Jquery,Cross Browser,当onclick使用jQuery 1.9.1覆盖禁用的浏览器时，我在尝试使onclick事件在不同浏览器之间一致工作时遇到问题： <html> <head> <title>Onclick</title> <script type="text/javascript" src="/RiO/Common/js/lib/jquery/jquery.min.js"></script>

当onclick使用jQuery 1.9.1覆盖禁用的浏览器时，我在尝试使onclick事件在不同浏览器之间一致工作时遇到问题：

<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的唯一方法是硬编码span—尝试使用jQuery插入它失败

然而，IE10和FF/Chrome的工作方式也不同，在IE中，覆盖a根本不起作用——这就好像选择优先，当它被禁用时，它会吞下任何点击

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

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

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

…这同样适用于IE10和FF，适用于各自的跨度/覆盖div，但在IE8中也不起作用

因为这是动态生成的代码，所以我不想最后不得不嗅探底层业务逻辑中的用户代理来创建正确的代码——但目前我看不出还有什么可以做。想法

更新： IE在将事件绑定到动态添加的元素时似乎存在问题。如果我将一个事件绑定到一个现有的元素，即，如果我总是将所有选择都包装在一个文件中，那么$span.on'click'。。。作品因此，有一个可能的前进路线，但是我仍然希望IE和FF采用相同的解决方案，以节省代码重复并消除代码中的一些复杂性，尽管我猜这是不实际的

还值得注意的是，这只是一个选择。如果select被一个禁用的输入文本框取代，那么我在浏览器之间有更可靠的行为：也就是说，在浏览器之间工作只需要将元素包装在一个文本框中

u说您尝试了on功能？但是你的功能似乎是错误的会是这样的：

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

我不知道为什么要在选项元素周围创建所有跨距。使用jQuery的onChange事件不是更容易吗

最新答复:

单击即可激活选择框：

$('#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');
});

触发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>

jquery版本请！抱歉，添加到问题序言中。尝试的是文档级别，它接受CSS类，从而创建委托事件处理程序-请参阅。这是因为绑定到动态添加元素的单击在IE中不起作用。你指的是哪个IE？jQuery1.7+应该支持iti经常使用$document.ajaxSuccessfunction{//el.unbind.on'click'，function{//do stuff}；这些是禁用的选择，因此没有更改事件。业务规则要求单击以激活字段，因此我需要能够检测到单击，以便启用字段。目前，不同的浏览器需要不同的实现，这是一个必须解决的问题。span需要将绝对div定位在select上，以捕获FF/Chrome/etc的onclick；div的位置和大小与跨度相符。你的意思是这样的：虽然不确定位置。是的，确实如此，尽管我不能在IE8中测试它，因为JSFIDLE不能与IE8一起工作。然而，把你的提琴拉到一个HTML页面中，它在Chrome中似乎不起作用，而你的提琴却起作用？我看不出你在做什么和我在做什么。由于篇幅太长，我不想更新这个问题，所以看看我在pastebin网站上抛出了什么。。。我猜我错过了一些明显的东西，但我正因为这个问题而遭受代码盲症的折磨。我暂时将代码上传到：它似乎在Chrome和IE8中对我都有效。它在IE7中也可以工作。好吧，我现在有了工作代码——仍然不太确定我的代码有什么不同，但我已经将它插入了基于此的工作中。其中一个原因是，我发现您所包含的CSS对于在不使用不同解决方案的情况下跨浏览器工作至关重要：这就是我所缺少的魔力，尽管它确实不应该被需要——这就是生活。

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

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);
}

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