0

In Masonry, it is possible to delete an element by clicking on it. The catch is, that You have to click directly on that element - so if you use these "bricks" as an image gallery (as long as these photos are included as a background image) You can delete them, by clicking on the element. The problem is, when you use these as some messages/info/other content containers. Then, due to formatting-related stuff the parent element gets "hidden" behind other tags, and You can't actually click on it.

The problem is shown here: http://jsfiddle.net/dan1410/SfU5T/ You can close red boxes, but not green ones, as they are overlapped by another elements.

I've tried code like:

eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'closeable' ) ) {
return;
}
// remove clicked element
msnry.remove( event.target );
// layout remaining item elements
msnry.layout();
});
});

and

var todelete = document.querySelector('.closeable');
eventie.bind( container, 'click', function( event ) {
// remove clicked element
msnry.remove( todelete );
// layout remaining item elements
msnry.layout();
});
});

but You still have to click directly on the element You'd like to close...

My masonry content structure looks like

<div id="masonry" >
   <div class="item blue closeable">
     <div id="itheader"><h2 class="secsectiontitle">Space available</h2></div>
     <div id="itcontent">
        some statistics here...<br/>
        and here, too
     </div>
</div>

Only elements with .closeable class are supposed to be closeable.

So, the question is: how to close an element using a button/a link? I'm not very familiar with JS, so I'd like to ask You guys for help. Thank You in advance!

4

1 回答 1

0

除非有阻止click事件在子元素上传播的处理程序，否则click事件应该冒泡而没有任何问题。

此外，如果您使用 jQuery，您应该使用 jQuery Masonry 的 API。

注意：我无法访问您的小提琴，也无法测试解决方案

var $container = $('#masonry').on('click', '.closeable', function (e) {
    $container.masonry('remove', e.currentTarget);
    $container.masonry(); //layout
    $container.masonry('reloadItems'); //OP said it was also required
});
于 2013-09-13T20:00:53.023 回答