草庐IT

javascript - 动态添加语义 UI 控件的正确方法？

coder 2023-08-06 原文

我正在努力思考 Semantic UI我明白一切都是如何由你给 DOM 元素的类控制的，但是当动态添加新的 DOM 元素时我无法真正让它工作。似乎语义 ui javascript 只在第一页加载时运行，而不是在我添加它们时在那些新元素上运行。目前，这是通过以下方式完成的:

$("#target").html("<new elements here>")

有正确的方法吗？我在语义 UI 网站上找不到任何关于此的文档。

更新:举一个更好的例子...

假设我有这样的布局:

<div class="right menu" id="rightMenu">
    <div class="ui dropdown link item">
      Courses
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item">Petting</a>
        <a class="item">Feeding</a>
        <a class="item">Mind Reading</a>
      </div>
    </div>
    <a class="item">Library</a>
    <a class="item">Community</a>
  </div>
</div>

然后运行这段代码:

var menu = '<div class="ui dropdown link item"> \
  Test \
  <i class="dropdown icon"></i> \
  <div class="menu"> \
    <a class="item" href="http://google.com">Google</a> \
    <a class="item" href="http://amazon.com">Amazon</a> \
  </div> \
</div>';

$("#rightMenu").append(menu)

新的菜单项看起来很好......但它实际上并没有像它应该的那样下拉，直到我运行这个:

$('.ui.dropdown')
  .dropdown({
    on: 'hover'
  });

在那之后，它在悬停时打开就好了。但是有没有办法不每次都重新运行它？

最佳答案

向 DOM 添加元素的方法很少。 html (会清空容器然后插入新元素)就是其中之一。您也可以使用 append将新元素附加到现有集合。但是，您的问题是关于动态添加的元素未触发的事件。解决方案是事件委托(delegate)。阅读more about it here .

From the jQuery doc: Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

这是我设置的关于添加新元素、事件延迟等的快速演示。希望对您有所帮助。

var $container = $("#container");
var count = 3;

$container.on("click", 'button', function() {

    alert ("You've clicked on " + $(this).text() );
});

$("#addButtons").on("click", function() {

    $container.append("<button>Button" + (++count) + "</button>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <button>Button1</button>
    <button>Button2</button>
    <button>Button3</button>
</div>

<button id="addButtons">Add a few more!</button>

编辑:即使是动态添加语义 UI 元素，规则也保持不变，因为它只是一个 element。 .我不确定您的页面上是否还有其他问题。查看下面的更新演示。

1) 使用 append

2) 使用 html

编辑: 所以，这就是语义 UI 下拉列表应该如何工作，因为下拉列表是由 Javascript 创建/呈现的。因此，当添加新选项/下拉菜单时，需要重新触发相关方法($('.ui.dropdown').dropdown({on: 'hover'});)。另一个解决方法是添加 simple类到新创建的下拉列表，即 var menu = '<div class="ui simple dropdown link item"> \当你鼠标悬停时会触发下拉菜单，但是。它没有动画!

希望对您有所帮助。

关于javascript - 动态添加语义 UI 控件的正确方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30531410/

javascriptUI34codegtjqueryhtmlsemantic-ui

有关javascript - 动态添加语义 UI 控件的正确方法？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  5. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  6. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  7. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  8. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

随机推荐