刪除選擇一個選項，結果不顯示在IE

這個網站是完全在Chrome瀏覽器，但不是在IE刪除選擇一個選項，結果不顯示在IE

文件非常簡單，只有兩個功能

1：單擊添加按鈕，第一行將被克隆並放置在添加按鈕之前

2：單擊組合框，第二個選項將被刪除。

現在問題是功能2

1。在IE中加載這個頁面，然後點擊添加按鈕添加一些組合框

2。單擊第一個組合框，並且您將不會看到組合框中的第二個選項（這是正確的結果）

3。單擊第二個組合框或其他克隆的組合框，然後您將看到第二個選項仍在組合框中，因此它不會被刪除。（這是不正確的結果）

4。如果您在開發人員工具中看到源代碼，則可以看到第二個選項已被刪除。

那麼，如何刪除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>

來源

2012-04-24 CL So

您的代碼似乎好工作與不使用.live（）（即使它不應該根據我的工作沒有生活）。如果您執行一些操作並檢查源，那麼所有事情都按計劃進行。 IE瀏覽器似乎並沒有更新它的複選框內容，但我不知道爲什麼是這樣。 :( 也許如果你告訴我們爲什麼你這樣做，我們可以找出一個IE友好的解決方案？:) – Sanchit 2012-04-24 12:28:33

我試過.live（）和.live（），生活是工作，不工作，所以它似乎.on（）不能100％替換.live（）。但我仍然想知道爲什麼.on（）和.focus（）在IE（在IE8＆9中測試）中不起作用，因爲.live（）有性能問題，如果我終於找不到原因，那麼我將使用。生活（）。我這樣做是因爲我讓用戶動態添加組合框的列表，並選擇該選項。但是如果選擇之前不允許選擇相同的選項，所以我需要搜索所有選項，如果選中，則刪除該選項。 – 2012-04-24 14:32:12

 $('select').live('focus',function(){ 
     $(this).find('option').eq(1).remove(); 
     });

使用現場 ..它可能工作。

來源

2012-04-24 12:05:37 nu6A

從jQuery 1.7開始，'.on（）'方法是將事件處理程序附加到文檔的首選方法。 – RASG 2012-04-24 12:48:23

感謝信息@RASG，對於其他人在這裏看看關於'** on **'[jQuery .live（）和.on（）之間的區別是什麼（http://stackoverflow.com/questions/8042576）/whats-the-difference-between-jquery-live-and-on） – nu6A 2012-04-24 12:53:48

第一個作品是因爲事件處理程序附加到DOM中當時唯一的「選擇」。然後，當你點擊'添加'時，一個新的'選擇'元素被添加到DOM，但沒有附加任何事件處理程序。我可能誤解了你的問題，讓我知道是否是這種情況。

如果您提供了清晰的規格，我可以寫一個如何完成的簡短示例。

來源

2012-04-24 12:17:58

我使用.clone（true）複製DOM，true表示使用eventhandler克隆DOM。我更改了代碼，因此即使您單擊其他克隆的選擇，也會看到警告窗口，並且$（this）.html（）讓您看到選擇中的更改。 '$（ '選擇'）專注（函數（）{ \t \t \t \t \t \t \t警報（$（本）的.html（））; \t \t \t \t \t \t \t $（本）.find（」。選項「），EQ（1）一個.remove（）; \t \t \t \t \t \t \t警報（$（本）的.html（））; \t \t \t}）;' – 2012-04-24 13:52:48

對我來說工作得很好。
這是我改變：

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

以下是完整的網頁，以更加「標準」代碼

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

來源

2012-04-24 12:46:33 RASG

刪除選擇一個選項，結果不顯示在IE

回答

相關問題