如果執行多個按鈕，javascript ul按鈕下拉列表將崩潰

Question

所以我有一個按鈕下拉列表，我希望用戶選擇一個選項，基本上該按鈕將返回用戶的選擇。相當簡單，在jsFiddle上進行了測試，效果很好。 順便說一句，在rails上使用ruby，所以我不確定它是否可能與rails處理javascript操作的方式相沖突。

這是代碼：

  <%= form_for(@user, :html => {:class => 'form-horizontal'}) do |f| %>
  <fieldset>
   <p>Do you have experience in Business? If yes, select one of the following:
<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select one <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li ><a href="#">Entrepreneurship</a></li>
      <li ><a href="#">Investments</a></li>
      <li ><a href="#">Management</a></li>
      <li class="divider"></li>
      <li ><a href="#">All of the Above</a></li>
    </ul>
  </div><!-- /btn-group -->
  <%= f.text_field :years_business , :class => "form-control", :placeholder => "Years of experience" %>
 </div>

現在有2個以上，基本上發生的是，如果我從下拉列表中第一次選擇一個項目，那么一切都會很好。 但是，當我選擇相同的按鈕或新按鈕時，頁面立即刷新，在列表下拉並用戶選擇一個值后，他們選擇的值將不會顯示。 我查看了頁面源代碼並添加了其他javascript src和類型，但仍然無法正常工作。 jQuery代碼：

   jQuery(function ($) {
$('.input-group-btn .dropdown-menu > li:not(.divider)').click(function(){
    $(this).closest('ul').prev().text($(this).text())
})
});

任何建議是什么引起了問題？ jsfiddle鏈接在這里：

http://jsfiddle.net/w4s8u/7/

Answer 1

檢查此處理函數是否可以解決您的問題：

 $('.input-group-btn .dropdown-menu > li > a').click(function(e){
            e.preventDefault();
            $(this).closest('ul').prev().text($(this).text())
        })