3

我已经搜索和试验了几个小时，我认为解决方案在于 jquery 中的 .on() 函数。但我似乎无法弄清楚正确的实现。

我有一个选项卡式菜单，我想将内容作为下拉菜单添加到其中一个选项卡，内容应该在 document.ready 加载

<div id="container" class="layout" style="border: 1px solid">
   <ul class="tabs">
    <li><a id="go_archives" href="#">Archives</a> </li>
    <li><a id="go_answers" href="#">Puzzle Answers</a>
    <ul class="dropdown">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
      <li><a href="#">Six</a></li>
    </ul>
    </li>
</div>

这是相关的CSS

/* menu tab styling */

ul.tabs {
  display: table;
  margin: 0;
  padding: 0 0 20px 2px;
  list-style: none;
  position: relative;
  border-bottom: 1px solid #00AEDB;
}

ul.tabs li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table-cell;
  float: left;
  position: relative;
}

ul.tabs a {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  margin: 0 7px 4px 2px;
  padding-bottom: 2px;
  text-decoration: none;
  color: #fff;
}

ul.tabs a:hover {
  border-bottom: 3px solid #FFF;
  padding-bottom: 2px;
}

/* dropdown styling */

ul.dropdown {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  z-index: 999;
  top: 100%;
  left:0;
}

ul.dropdown ui.dropdown {
  top: 0;
  left: 95%;
}

ul.dropdown li {
  margin: 0;
  padding: 0;
  float: none;
  position: relative;
  list-style: none;
  display: block;
}

ul.dropdown li a {
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  display: block;
  width: 100%;
}

和 JS

$('.dropdown').parent().mouseenter(function () {
    $('.dropdown', this).slideToggle('fast');
  });

$('.dropdown').parent().mouseleave(function () {
    $('.dropdown', this).slideUp('fast');
  });

所有这些都可以很好地滑出 go_answers LI 下的 UL

在萤火虫我运行以下

$.get("shite.html", function(result){
    $("#go_archives").parent().append(result);
  });

加载shite.html

<ul class="dropdown">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
</ul>

它会更新 DOM（我认为这是正确的术语），但是当我将鼠标悬停在 Archives 链接上时，它不会滑出。

我错过了什么让它滑出？

4

3 回答 3

2

你可以这样实现 .on() 方法：

$("#container").on({
    mouseenter: function (event) {    
       $('.dropdown', this).slideToggle('fast');
    },            
    mouseleave: function (event) {
       $('.dropdown', this).slideUp('fast');   
    },
    mousedown: function (event) {
       //Do stuff
    }
    },
    ".dropdown"
);
于 2012-09-18T19:12:39.083 回答
0

当您像这样动态地重新加载 DOM 元素时，您需要重新附加事件。您应该将 mouseenter 和 mouseleave 命令放在一个函数中，并在文档准备好和 get 中调用该函数。

我在这里设置了一个小提琴来演示如何设置它。您所呈现的结果是我刚刚存储在一个隐藏的 div 中的 ajax 调用的返回结果，当您单击测试按钮时，它会将 div 内容添加到您的列表项中。一旦新的 DOM 元素就位，我们重新运行您的 jquery 以让选择器拾取新元素并在操作 css 类之后，以便您获得预期的演示文稿，您的下拉菜单可以正常工作。

总体要点是要记住，您从 Jquery 选择器分配给结果的事件仅添加到在运行时与选择器匹配的那些元素。如果您将与选择器匹配的新元素插入到 DOM 中，这并不意味着您的新元素也会选择附加的行为。

于 2012-09-18T19:12:10.117 回答
0

我面临同样的问题

jQuery

$(function() {
    $(".mytable").on('click', '.toggle', function () {
    alert("toggle Clicked");
    });
});

ajax之前的HTML

<div class="tabs">
    <ul class="tab-links" id="tab-links">

    </ul>

    <div class="tab-content" id="tab-content">

    </div>
</div>

ajax后的HTML

<div class="tabs">
    <ul class="tab-links" id="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>        
    </ul>

    <div class="tab-content" id="tab-content">
        <div id="tab1" class="tab active" >
            <table id="mytable1" class="mytable">
                <tr data-depth="0" class="expand level0">
                    <td>
                    <span class="toggle expand">+</span>
                    Everything Else [<a class="link">99</a>]
                    </td>   
                    <td> 1$</td>    
                </tr>
            </table>
        </div>
    </div>
</div>

它不起作用，然后我将其更改为

jQuery

$(function() {
    $(document).on('click', '.mytable .toggle', function () {
    alert("toggle Clicked");
    });
});

现在工作正常。

于 2014-08-04T13:34:56.247 回答