1

我有一个这样的 index.html.erb

<div id="carte_items">
  <ul id="nav">
    <li id="category_14" class="category-group">
      <p class="category">Pizzas tradicionais</p>

      <ul class="tags">
        <li>
          <div class="links" style="display: none;">
            <a href="#" data-method="delete" data-remote="true" rel="nofollow">
              <i class="icon-trash icon-white"></i>
            </a>

            <a href="#" data-remote="true">
              <i class="icon-pencil icon-white"></i>
            </a>
          </div>
          Pizza X
        </li>

        <li>
          <div class="links" style="display: none;">
            <a href="#" data-method="delete" data-remote="true" rel="nofollow">
              <i class="icon-trash icon-white"></i>
            </a>

            <a href="#" data-remote="true">
              <i class="icon-pencil icon-white"></i>
            </a>
          </div>
          Pizza X
        </li>
      </ul>
    </li>
  </ul>
</div>

所以，我的 products.js.coffee 中有这个

$("ul.tags li").on('mouseover', () ->
 $(this).find('.links').show()
).on('mouseout', () ->
 $(this).find('.links').hide()
)

当我第一次访问我的 index.html.erb 时，一切正常。但是对于在我第一次访问时仍然有效的链接，我必须将 products.js.coffee 中的源代码复制到下面的 index.js.erb 中。就像当我使用我的搜索时，使用 ajax 进行搜索一样，如果我没有像下面那样复制源代码，“.links”就不会再显示了。

他们我有这样的 index.js.erb

$("#carte_items").html("<%= j(render 'carte_items') %>");
$("ul.tags li").on('mouseover', function() {
  return $(this).find('.links').show();
}).on('mouseout', function() {
  return $(this).find('.links').hide();
});

为什么一定要复制源码？它不必只使用文件 products.js.coffee 中的源代码而无需复制到 index.js.erb 就可以正常工作？

感谢帮助。

4

2 回答 2

2

来自 jQuery API 文档：

。上（）

描述：将一个或多个事件的事件处理函数附加到选定元素。

。代表（）

描述：基于一组特定的根元素，为现在或将来匹配选择器的所有元素附加一个处理程序到一个或多个事件。

代表：“……现在或将来”。所以尝试delegate()代替on().

希望它有效！

于 2013-04-23T17:32:57.943 回答
2

尝试这个：

$("ul.tags").delegate('li', 'mouseover', () ->
 $(this).find('.links').show()
).delegate('li', 'mouseout', () ->
 $(this).find('.links').hide()
)

或者：

$("ul.tags").on('mouseover', 'li', () ->
 $(this).find('.links').show()
).on('mouseout', 'li', () ->
 $(this).find('.links').hide()
)
于 2013-04-23T17:30:44.013 回答