I'm trying to use a jquery .wysiwyg editor in div load in using .load() but it's not working. The wysiwgy code is outside the div, at the bottom of the page with the rest of a jquery. I've tested placing the jquery directly into the div and this works fine but it's not very neat.
Here's the jquery code, I'm pretty sure I'm doing something wrong with the way I'm using .live if someone could point me in the right direction it would be greatly appreciated.
$('#editBrandEmail').live('click', function(){
$('#editBrandEmailDiv').load($('#editBrandEmail').attr('href'));
$('.wysiwyg').wysiwyg({
controls: {
strikeThrough : { visible : true },
underline : { visible : true },
justifyLeft : { visible : true },
justifyCenter : { visible : true },
justifyRight : { visible : true },
justifyFull : { visible : true },
indent : { visible : true },
outdent : { visible : true },
subscript : { visible : true },
superscript : { visible : true },
undo : { visible : true },
redo : { visible : true },
insertOrderedList : { visible : true },
insertUnorderedList : { visible : true },
insertHorizontalRule : { visible : true },
h4: {
visible: true,
className: 'h4',
command: $.browser.msie ? 'formatBlock' : 'heading',
arguments: [$.browser.msie ? '<h4>' : 'h4'],
tags: ['h4'],
tooltip: 'Header 4'
},
h5: {
visible: true,
className: 'h5',
command: $.browser.msie ? 'formatBlock' : 'heading',
arguments: [$.browser.msie ? '<h5>' : 'h5'],
tags: ['h5'],
tooltip: 'Header 5'
},
h6: {
visible: true,
className: 'h6',
command: $.browser.msie ? 'formatBlock' : 'heading',
arguments: [$.browser.msie ? '<h6>' : 'h6'],
tags: ['h6'],
tooltip: 'Header 6'
},
cut : { visible : true },
copy : { visible : true },
paste : { visible : true },
html : { visible: true }
}
});
return false;
});
Try adding a callback function for the load and put codes for '.wysiwyg' in it
ie;
$('#editBrandEmail').live('click', function(){
$('#editBrandEmailDiv').load($('#editBrandEmail').attr('href'),function(){
$('.wysiwyg').wysiwyg({
controls: {
.....
........
........
});
});