无法让 Materialize css 下拉列表与动态加载的模式一起使用

Posted 2023-05-09

【中文标题】无法让 Materialize css 下拉列表与动态加载的模式一起使用

【英文标题】：Can not get Materialize css dropdown to work with dynamically loaded modal

【发布时间】：2017-05-11 03:03:26

【问题描述】：

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

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

以下代码使其运行（或不运行：-（）。我使用的是咖啡脚本和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
                %td=@photo.date_taken_formatted
              %tr
                %td ID
                %td=@photo.id
              %tr
                %td Country
                %td=@photo.location.country
              %tr
                %td Model
                %td=@photo.model
              %tr
                %td Make
                %td=@photo.make

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

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

【问题讨论】：

你能发布下拉的 HTML 渲染源吗？它可以帮助检查所有属性是否都在正确的位置。你可以做的另一个测试是在检查器中调用$('.dropdown-button') 和$('.dropdown-button').dropdown() 看看会发生什么

你使用turbolinks吗？

@Mat Dear Sir... ;-) 你为我解决了这个问题 - 间接地。当我打电话给$('.dropdown-button') 时，我意识到我已经多次加载下拉列表，导致 的 id 重复了几次——这搞砸了初始化。谢谢

【参考方案1】：

Documentation 表示您必须在动态创建它时对其进行初始化。

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

【讨论】：

我在 modalInit 函数中初始化它。它有一个回调函数，当模态加载时被调用

【参考方案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，这搞砸了下拉菜单的初始化。