如何在不破壞其中一個插件的情況下使用另一個插件中的JQuery插件？

Question

使用下面的代碼我正在使用JQuery翻轉插件生成翻轉效果。在「verso」屬性中，我有一個ID爲#ddlBookletType的選擇菜單。該ID用於觸發另一個創建下拉菜單的JQuery插件。

我有html（這是在verso屬性中）的方式是打破下拉插件。如果我刪除翻轉功能，然後我的下拉菜單工作。

問：

我能做些什麼，以確保同時仍使用翻頁插件，我不會打破下拉插件，它正在使用的翻蓋插件內與ID ddlBookletType？

代碼：

<script type="text/javascript"> 
     function allflip() { 
      flip(); 
      flip2(); 
     } 
     function flip2() { 
      $("#fb_flip").on("click", function (e) { 
       $(".flip_stuff").flippy({ 
        color_target: "transparent", 
        direction: "top", 
        duration: "750", 
        verso: "<select id='ddlBookletType'>" + 
        "<option value='<%=(int)Booklet.BookletTypeEnum.EventOne %>'>" + 
         "<%=Booklet.BookletTypeEnum.EventOne.GetDescription() %></option>" + 
        "<option value='<%=(int)Booklet.BookletTypeEnum.EventTwo %>'>" + 
         "<%=Booklet.BookletTypeEnum.EventTwo.GetDescription()%></option>" + 
        "<option value='<%=(int)Booklet.BookletTypeEnum.EventThree %>'>" + 
         "<%=Booklet.BookletTypeEnum.EventThree.GetDescription()%></option>" + 
        "<option value='<%=(int)Booklet.BookletTypeEnum.EventFour %>'>" + 
         "<%=Booklet.BookletTypeEnum.EventFour.GetDescription()%></option>" + 
        "<option value='<%=(int)Booklet.BookletTypeEnum.EventFive %>'>" + 
         "<%=Booklet.BookletTypeEnum.EventFive.GetDescription()%></option>" + 
       "</select>", 
        onFinish: function() { 

         $("#back").on("click", function (e) { 
          $(".flip_stuff").flippyReverse(); 
          setTimeout(function() { 
           allflip(); 
          }, 1000); 
         }); 
        } 
       }); 
       e.preventDefault(); 
      }); 
     } 
     $(document).ready(function() { flip2(); }); 
    </script> 

    <script type="text/javascript"> 
     $("#back").on("click", function (e) { 
      $(".flip_stuff").flippyReverse(); 
     }); 
    </script> 

Answer 1

嘗試纏繞封閉這樣你的代碼。你可能會破壞全局命名空間。

(function() { 
    var flip = function() { 
    ... 
    }; 
}());