2

我正在使用 jquery 来扩展/隐藏一段内容。然后我将其更改为用于展开/隐藏内容的链接是一个按钮并且破坏了它。这是在我更改为按钮之前工作的代码：

<body>
<div class="content">
<a class="toggle" href="">Expand box 1</a>
<div class="contentHidden" style="display:none;">Hidden 1</div>
</div>
<div class="content">
<a class="toggle" href="">Expand box 2</a>
<div class="contentHidden" style="display:none;">Hidden 2</div>
</div>
</body>
<script type='text/javascript'>
$(function() {

    $(".toggle").click(function(event) {
        $(event.target).parent(".content").find(".contentHidden").toggle('slow');
        event.preventDefault()

    });

});
</script>

但是，如果我将功能更改为以下内容，它将不再起作用：

$(function() {

    $(".toggle").button({ icons: { primary: 'ui-icon ui-icon-arrowthick-1-e'} });
    $(".toggle").click(function(event) {
        $(event.target).parent(".content").find(".contentHidden").toggle('slow');
        event.preventDefault()

    });


});

就好像对 button() 的调用改变了层次结构，我的搜索不再返回 '.contentHidden' div

问候德斯

4

1 回答 1

1

是的，JQuery UIbutton()在原始链接下创建了一个新的层次结构（添加了几个跨度）。其中一个跨度是新的可点击项目，因此仅出于这个原因它就出错了（点击的元素比以前深一层），所以使用closest代替parent：

$(".toggle").button({
    icons: {
        primary: 'ui-icon ui-icon-arrowthick-1-e'
    }
});
$(document).on('click', '.toggle', function (event) {
    $(event.target).closest(".content").find(".contentHidden").toggle('slow');
    event.preventDefault()

});

在这里工作 JSFiddle：http: //jsfiddle.net/HxKLy/

另一个问题，在这种情况下，使用 click 而不是说 deferredon实际上是一个红鲱鱼，但我将保留在下面以供参考。

使用 click 绑定到特定的 DOM 元素意味着，一旦您更改了 DOM，click 事件就会被分离。通常，您会希望使用延迟调用语法 ofon而不是 a click，但在这种情况下它没有任何可能性。

例如

$(document).on('click', '.toggle', function(event)...

代替

$(".toggle").click(function(event)

只是为了证明这不是实际问题，这里有一个带有点击返回的小提琴变体：

http://jsfiddle.net/HxKLy/1/

于 2013-10-01T14:18:26.813 回答