无法让 Materialise css 下拉菜单与动态加载的模态一起使用

Question

我有一个使用 MaterializeCSS 运行的 Rails 应用程序。我通常在应用程序中的许多地方使用 Materialize，包括 JS 对象（如 FAB 按钮），并且一切正常......除了下拉按钮。

我有这样一段代码，我在模态表单上加载一个模态表单我有两个需要JS的materializecss组件：1）一个可折叠列表和2）一个下拉列表。可折叠列表工作正常，但下拉列表不行。

以下代码使其运行（或不运行:-( ）。我正在使用coffeescript和haml：

这会初始化模态：

modalInit: () ->
  $('#photo-modal').modal
    dismissible: true
    opacity: .5
    in_duration: 300
    out_duration: 200
    starting_top: '4%'
    ending_top: '10%'
    ready: (modal, trigger) ->
      App.PhotoTaginput.refresh()
      $('.collapsible').collapsible();
      $('.dropdown-button').dropdown();

请注意，可折叠和下拉菜单以相同的方式初始化！！

我用这个脚本加载模态：

showModal: (element) ->
  _this = this
  photoId = $(element).parents('.photo-widget').data("photoid")
  url = '/photos/' + photoId + '?view=modal'
  $('#photo-modal > .modal-content').load url, (result) ->
    $('#photo-modal').modal('open');

这会获取一些如下所示的 HTML：

.row
  .image_info#photo_id{:photo_id=>@photo.id, "data-photo_id"=>@photo.id}
    .col.l5
      .modal-toolbar
        %a.waves-effect.waves-light.btn.like{:type => "button", :class=>current_user.voted_for?(@photo) && "red"}
          %i.fa.fa-thumbs-o-up
        %a.dropdown-button.btn{"data-activates" => "dropdown1", :href => "#"} Drop Me!
        %ul#dropdown1.dropdown-content
          %li
            %a{:href => "#!"} one
          %li
            %a{:href => "#!"} two
          %li.divider
          %li
            %a{:href => "#!"} three

    .col.l12#modal_image
      %img.bg.responsive-img{:src => "#{@photo.url('org')}"}



    %ul.collapsible.overlay-menu.overlay-menu-show{"data-collapsible"=>"accordion"}
      %li
        .collapsible-header.overlay-menu-header
          %i.material-icons info
          info
        .overlay-menu-body.collapsible-body
          %table
            %tbody
              %tr
                %td Date
                %[email protected]_taken_formatted
              %tr
                %td ID
                %[email protected]
              %tr
                %td Country
                %[email protected]
              %tr
                %td Model
                %[email protected]
              %tr
                %td Make
                %[email protected]

它一定与动态初始化下拉列表的JS有关。我这样说是因为我可以看到当我按下按钮时下拉菜单上的 css 不会改变。但这有点奇怪，因为它的初始化方式与可折叠的相同。

我非常确定 jquery 和 Materialize 库已正确加载。我已经在其他代码部分中使用了这两个库来吞吐量应用程序

Answer 1

文档说你必须在动态创建它时初始化它。

jQuery 插件初始化

只有在创建下拉菜单时才需要初始化它们 动态地。

  $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button
    }
  );

Answer 2

结果是一些 HTML 增强。

我多次不小心加载了此部分：

    %a.dropdown-button.btn{"data-activates" => "dropdown1", :href => "#"} Drop Me!
    %ul#dropdown1.dropdown-content
      %li
        %a{:href => "#!"} one
      %li
        %a{:href => "#!"} two
      %li.divider
      %li
        %a{:href => "#!"} three

这导致 HTML 中出现多个

#dropdown1

的 id，这搞砸了下拉列表的初始化。

Answer 3

我的下拉菜单在更新页面后仅加载一次，我通过同时插入两种方法解决了这个问题。 数据激活=“dropdown1”数据目标=“dropdown1”

`

永久身份`