Old JQuery code that dosen't work anymore (wordpress)

Question

I updated a wordpress site to Version 5.7.2. Now two of the coustom Metaboxes dosen't work anymore. The Problem is that the JQuery of the Metaboxes is to old. I use a Plugin called jQuery Migrate Helper that the code works.

But what the plugin do is to change the jquery to an old legacy version(Legacy 1.12.4-wp).

I don't think it's a good idea to use this old code. Is someone here how can help with this old code ?

function zib_assistant($post)
{
    wp_nonce_field(basename(__FILE__), 'zib_nonce');
    $zib_stored_meta = get_post_meta($post->ID);
    ?>
    <div class="assistant-wrapper">

        <h2 for="" class="assistant">Assistant</h2>
        <table class="assistant-table">
            <?php
            $assistant = get_post_meta($post->ID, 'assistant');
            $i = 0;
            $output = "";
            do {
                $output .= '<tr>
                    <th>
                        <label for="assistant_image[]">Image</label>
                    </th>
                    <td>
                        <img class="user-preview-image" src="' . $assistant[0][$i]['imgsrc'] . '">

                        <input type="text" class="assistant-image-input" name="assistant[image][]" id="" value="' . $assistant[0][$i]['imgsrc'] . '" class="regular-text"/>
                        <input type="button" class="button-primary upload-assistant-image" value="Upload Image" /><br/>
                        <span class="description">Please upload an image for the Assistent.</span>
                    </td>
                    <th>
                        <label for="assistant_name[]">Name</label>
                    </th>
                    <td>
                        <input type="text" name="assistant[name][]" id="" size="50" value="' . $assistant[0][$i]['name'] . '"/>
                    </td>
                    <td><a href="#" class="button-primary remove-assistant" style="background:red;" >Remove</a></td>
                </tr>';
                $i++;
            } while ($i < count($assistant[0]));
            echo $output;
            ?>
        </table>
        <a href="#" class="add-more-assistent button-primary" style="background:green;" id="remove-assistant">Add</a>

    </div>

    <script type="text/javascript">
        (function ($) {
            $('.upload-assistant-image').live('click', function () {
                tb_show('Image', 'media-upload.php?type=image&TB_iframe=1');
                var imgInput = $(this).parent().children('.assistant-image-input');

                window.send_to_editor = function (html) {
                    imgurl = $('img', html).attr('src');
                    imgInput.val(imgurl);
                    tb_remove();
                };

                return false;
            });
        })(jQuery);

        jQuery(document).ready(function ($) {
            var scntDiv = $('.assistant-table');
            var i = $('.assistant-table tr').size() + 1;

            $('.add-more-assistent').live('click', function () {
                $('<tr>' +
                    '<th>' +
                    '<label for="assistant[img]">Image</label>' +
                    '</th>' +
                    '<td>' +
                    '<input type="text" class="assistant-image-input" name="assistant[image][]" id="" value="" class="regular-text"/>' +
                    '<input type="button" class="button-primary upload-assistant-image" value="Upload Image" /><br/>' +
                    '<span class="description">Please upload an image for the Assistent.</span>' +
                    '</td>' +
                    '<th>' +
                    '<label for="assistant[img]">Name</label>' +
                    '</th>' +
                    '<td>' +
                    '<input type="text" name="assistant[name][]" id="" size="50" value=""/>' +
                    '</td>' +
                    '<td><a href="#" class="button-primary remove-assistant" style="background:red;">Remove</a></td>' +
                    '</tr>').appendTo(scntDiv);
                i++;
                return false;
            });

            $('.remove-assistant').live('click', function () {
                var tr = $(this).closest('tr');
                    
                tr.hide();
                tr.find('input').val('');
                return false;
            });
        });
    </script>
    <?php
}

Answer 1

Perfect this worked for me.

.live has been removed with v1.9, you need to replace that with a corresponding .on – CBroe

    <script type="text/javascript">
        (function ($) {
            $('.upload-doctor-image').on('click', function () {
                tb_show('Image', 'media-upload.php?type=image&TB_iframe=1');
                var imgInput = $(this).parent().children('.assistant-image-input');

                window.send_to_editor = function (html) {
                    imgurl = $('img', html).attr('src');
                    imgInput.val(imgurl);
                    tb_remove();
                };

                return false;
            });
        })(jQuery);

        jQuery(document).ready(function ($) {
            var scntDiv = $('.doctor-table');
            var i = $('.assistant-table tr').size() + 1;

            $('.add-more-doctor').on('click', function () {
                $('<tr>' +
                    '<th>' +
                    '<label for="doctor[image][]">Image</label>' +
                    '</th>' +
                    '<td>' +
                    '<input type="text" class="assistant-image-input" name="doctor[image][]" id="" value="" class="regular-text"/>' +
                    '<input type="button" class="button-primary upload-assistant-image" value="Upload Image" /><br/>' +
                    '<span class="description">Please upload an image for the Assistent.</span>' +
                    '</td>' +
                    '<th>' +
                    '<label for="doctor[name][]">Name</label>' +
                    '</th>' +
                    '<td>' +
                    '<input type="text" name="doctor[name][]" id="" size="50" value=""/>' +
                    '</td>' +
                    '<td><a href="#" class="button-primary remove-doctor" style="background:red;">Remove</a></td>' +
                    '</tr>').appendTo(scntDiv);
                i++;
                return false;
            });


            $('.remove-doctor').on('click', function () {
                var tr = $(this).closest('tr');
                    
                tr.hide();
                tr.find('input').val('');
                return false;
            });
        });
    </script>