Show/Hide Postbox doesn't work if dynamically added

[johnstonphilip]

If you have a plugin which adds a metabox to the page at runtime, the "handlediv" button which shows/hides the contents of that metabox doesn't work.

To fix it, the code (on line 12 of postbox.js and also in postbox.min.js) should change from:

$('.postbox h3, .postbox .handlediv').bind('click.postboxes', function() {

To:

$(document).on('click.postboxes', '.postbox h3, .postbox .handlediv', function() {

P.S. I have tried to submit a patch in the past but my entire computer had a meltdown and scattered files from here to Mordor to the Shire because I have no idea how to do it properly. This after spending a couple weeks reading up on how to it properly. So, unfortunately, I am not able to submit a patch due to the incredibly difficult-for-me-to-understand SVN system. My Apologies.

[jesin]

What plugin are you using? I am unable to reproduce this issue with my own meta box code.

This is the code I used.

function sample_meta_box() {
	add_meta_box( 'sample', 'Sample', 'sample_html', 'post' );
}

function sample_html() {
	echo 'Some text here';
}

add_action( 'add_meta_boxes', 'sample_meta_box' );

[kucrut]

Just curious, are you adding a meta box to the post editing screen or a plugin settings screen? To make the meta boxes work on plugin settings screen, you will need to initialize the postbox script manually.

By the way, if you're more comfortable with Git than with SVN, you can follow ​scribu's guide on how to contribute using Git :)

[johnstonphilip]

@jesin I am actually not referring to creating a metabox using 'add_meta_box' or even PHP at all. I'm referring to after it has been created. Say you're on the post editing screen and you might have a "duplicate" button which clones the metabox and changes some of the values. The way it is now, you can't duplicate it using javascript and still have the open/close controls work because it's new to the DOM.

@kucrut I am adding it to the post editing screen. Thanks for the git suggestion.

P.S. <3 Blink

[johnstonphilip]

Make postboxes open/close if added after DOM

[johnstonphilip]

The reason why I want to do it this way is because I have a potentially unlimited number of unique metaboxes - but only need to show 2 at any given time.

I would like to load ONLY what is actually needed (based on user selection in an existing meta box). This is why I would like to create those metaboxes at-runtime and load their contents in through ajax.

I could create hundreds of empty metaboxes and then trigger the ajax when the user selects the data in question - but I would rather only create the metaboxes needed.

[johnstonphilip]

Additionally, according to the jQuery website, "bind" is no longer the preferred method as "on" is now preferred.

Read more here: ​http://api.jquery.com/bind/
"As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document."

[johnbillion]

Thanks for the updated patch, johnstonphilip.

It looks like the order of the first two parameters in .on() needs to be reversed.

Do the other event handlers in add_postbox_toggles() need to be updated too? I would expect so, for completeness.

[johnstonphilip]

All "bind"s changed to "on"s.

[johnstonphilip]

Replying to johnbillion:

Good call - not sure how I missed that.

I tested this patch this time - on both Chrome, Safari, and Mobile Safari.

Thanks for taking a look, johnbillion!