2

This HTML is completely working in Chrome, but not in IE.

The file is very simple with only two functions:

  1. Click the add button, and the first row will be cloned and place to before of the add button.

  2. Click the combo box and the second option will be deleted.

Now the problem is function 2:

  1. In IE, load this page, and click the add button to add some combo box.

  2. Click the first combo box, and you will not see the second option in the combo box. (This is correct result.)

  3. Click the second combo box or other cloned combo box, and then you will see the second option still in the combo box, so it is not removed. (This is not correct result.)

  4. If you see the source in developer tool, you can see the second option is removed.

So, how to remove the option in IE?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
jQuery(document).ready
(
    function()
    {
        $('#add').click(function(){
                        $(this).parent().parent().before($('tr').eq(0).clone(true));
        });
        $('select').focus(function(){
                        $(this).find('option').eq(1).remove();
        });
    }
);
</script>
</head>
<body>
<table>
    <tr>
        <td>
            <select>
                <option>1</option><option>2</option><option>3</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input id="add" type="button" value="add"/></td>
    </tr>
</table>
</body>
</html>
Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
CL So
  • 3,647
  • 10
  • 51
  • 95
  • Your code seems to work fine with and without the using .live() (even though it shouldn't work according to me without live). If you perform some actions and check the source then everything happens as planned. IE just doesn't seem to update its checkbox contents though and I have no idea why that is so. :( Maybe if you tell us why you are doing this we can figure out an IE friendly solution? :) – Sanchit Apr 24 '12 at 12:28
  • I have tried .live() and .live(), live is work, on is not work, so it seems that .on() cannot 100% replace .live(). But I still want to know why .on() and .focus() are not work in IE (tested in IE8 & 9) as .live() has performance problem, if I cannot find the reason finally, then I will use .live(). I do this because I let user add a list of combo box dynamically, and select the option. But it is not allowed to select same option if that is selected before, so I need search all option, if selected, remove that option. – CL So Apr 24 '12 at 14:32

3 Answers3

1

The first works because the eventhandler is attached to the only 'select' that is in the DOM at that point. Then when you click 'Add', a new 'select' element is added to the DOM but that one does not have any event handler attached. I might have misunderstood your question, let me know if this is the case.

If you provide clear specs, I could write up a short sample of how it could be done.

Pierluc SS
  • 3,138
  • 7
  • 31
  • 44
  • 1
    I use .clone(true) to copy the DOM, the true means clone the DOM with eventhandler. I have changed the code, so you will see the alert window is shown even you click on other cloned select, and the $(this).html() let you see the change in the select. `$('select').focus(function(){ alert($(this).html()); $(this).find('option').eq(1).remove(); alert($(this).html()); });` – CL So Apr 24 '12 at 13:52
1

worked fine for me.
this is what i changed:

<script type="text/javascript">
    $(window).load(function(){
        $('#add').on('click', function(){
            $(this).parent().parent().before($('tr').eq(0).clone(true));
        });

        $('select').on('focus', function(){
            $(this).find('option').eq(1).remove();
        });
    });
</script>

Here is the full page, with a more "standard" code

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $('#add').on('click', function(){
                $('#formclone').append($('.myselect').eq(0).clone(true));
            });

            $('select').on('focus', function(){
                $(this).find('option').eq(1).remove();
            });
        });
    </script>
</head>

<body>
<div id="divform">
    <form class="myform">
        <select class="myselect">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <input id="add" type="button" value="add">
    </form>
</div>
<p>
    <div id="divclone">
        clones: 
        <form id="formclone"></form>
    </div>
</p>
</body>

</html>
RASG
  • 5,988
  • 4
  • 26
  • 47
0
        $('select').live('focus',function(){
        $(this).find('option').eq(1).remove();
        });

use live.. it may work.

arun
  • 3,667
  • 3
  • 29
  • 54
  • 2
    As of jQuery 1.7, the `.on()` method is the preferred method for attaching event handlers to a document. – RASG Apr 24 '12 at 12:48
  • thanks for the inforamtion @RASG, for others take a look here regarding '**on**' [What's the difference between jQuery .live() and .on()](http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on) – arun Apr 24 '12 at 12:53