适配jQuery 1.12.4：修改动态添加TinyMCE文本框删除代码

Got it, let's adjust your code to work smoothly with jQuery 1.12.4! The key issue with your original setup (for dynamic elements) is that direct event binding won't work for elements added after the page loads. jQuery 1.12.4 relies on event delegation for this scenario, which replaces older, deprecated methods like .live() used in 1.8.1. Here's the modified code with critical improvements:

$(document).ready(function() {
    // Handle adding new type rows
    $('a.add-type').off('click').on('click', function(e) {
        e.preventDefault();
        var content = $('#type-container .type-row');
        var element = content.clone();
        
        // Clean up and reinitialize TinyMCE for the cloned textarea
        element.find('textarea').each(function() {
            // Remove any existing TinyMCE instance from the cloned element
            var oldEditorId = $(this).attr('id');
            if (tinymce.get(oldEditorId)) {
                tinymce.remove(oldEditorId);
            }
            // Generate a unique ID to avoid conflicts with existing editors
            var newEditorId = 'type-editor-' + Date.now() + Math.floor(Math.random() * 1000);
            $(this).attr('id', newEditorId);
            // Initialize TinyMCE on the new textarea (add your config here)
            tinymce.init({
                selector: '#' + newEditorId,
                plugins: 'advlist autolink lists link image charmap print preview',
                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter | bullist numlist | removeformat'
            });
        });
        
        // Append the new row to the container
        $('#type-container').append(element);
    });

    // Handle deleting dynamic rows using event delegation
    // Bind the event to a static parent (exists on page load) instead of dynamic buttons
    $('#type-container').off('click', '.delete-type').on('click', '.delete-type', function(e) {
        e.preventDefault();
        var $targetRow = $(this).closest('.type-row');
        
        // Clean up TinyMCE before removing the row to avoid memory leaks
        $targetRow.find('textarea').each(function() {
            var editorId = $(this).attr('id');
            if (tinymce.get(editorId)) {
                tinymce.remove(editorId);
            }
        });
        
        // Delete the row from the DOM
        $targetRow.remove();
    });
});

Key Changes for jQuery 1.12.4: #

• Event Delegation for Delete Buttons: Instead of binding clicks directly to .delete-type (which doesn't exist yet when the page loads), we attach the event to the static #type-container parent and target .delete-type as the delegate. This ensures the event works for all dynamically added rows.
• TinyMCE Cleanup & Unique IDs: When cloning rows, we remove existing TinyMCE instances and generate unique IDs for new textareas. This prevents conflicts and memory leaks, which is critical for stable behavior in newer jQuery versions.
• Simplified Syntax: Removed the unnecessary single-run for loop and used $ consistently (no need for the jQuery alias inside the ready wrapper).

Why This Works: #

Event delegation with .on() (using a selector argument) is the recommended approach for dynamic elements in jQuery 1.7+. It replaces deprecated methods like .live() and .delegate() that were common in 1.8.1, making your code more efficient and future-proof.

内容的提问来源于stack exchange，提问作者Nooglers BIT