ansaurus

Question

moving select options up and down via jquery

Answer 1

+1 A:

Your code for changing the options works fine. It seems IE8 isn't handling a "fast" second-click with the click event but rather expects a double click to be handled.

Using my test code below, you'll notice that in IE8 writes out the following when Move Down/Up is pressed "fast":

Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click

But with FF/Chrome the following is printed:

Move Down Click
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Click
Move Down Double-Click

Here's the code I'm using to test. I haven't done any tests to see if it's jQuery's event binders that are causing the issues.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>    
    <title>Test</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;

</head>
<body>

<select id="list" multiple="multiple">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>

<script type="text/javascript">

var $DEBUG = null;

$(document).ready(function ()
{
    $DEBUG = $("#debug");

    $DEBUG.append("Registering Events<br />");

    $("#mup").click(moveUpItem);
    $("#mdown").click(moveDownItem);
    $("#mup").bind("dblclick", function ()
    {
        $DEBUG.append("Move Up Double-Click<br />");
    });
    $("#mdown").bind("dblclick", function ()
    {
        $DEBUG.append("Move Down Double-Click<br />");
    });

});

function moveUpItem()
{
    $DEBUG.append("Move Up Click<br />");
}

function moveDownItem()
{
    $DEBUG.append("Move Down Click<br />");
} 

 </script>

 <div id="debug" style="border: 1px solid red">
 </div>

</body>

</html>

EDIT: I can confirm it is IE8 that is the problem. Swap this IE8-specific code in the $(document).read() handler:

// $("#mup").click(moveUpItem);
$("#mup")[0].attachEvent("onclick", moveUpItem);
// $("#mdown").click(moveDownItem);
$("#mdown")[0].attachEvent("onclick", moveUpItem);
// $("#mup").bind("dblclick", function ()
$("#mup")[0].attachEvent("ondblclick", function ()
{
    $DEBUG.append("Move Up Double-Click<br />");
});
// $("#mdown").bind("dblclick", function ()
$("#mdown")[0].attachEvent("ondblclick", function ()
{
    $DEBUG.append("Move Down Double-Click<br />");
});

TheCloudlessSky 2010-07-23 00:28:01

ansaurus

tags:

views:

answers:

moving select options up and down via jquery

related questions