需要重新启用通过onclick事件禁用的onmouseon

Question

我正在尝试修改一个prestashop模块，该模块允许按块显示属性组：如果产品具有多个属性组，则显示第一个块。选择该组的一个属性后，将显示第二个组。 如果属性组是颜色，则需要在弹出窗口中显示它。 我在模块的js文件末尾添加了此代码：

   $(document).ready(function(e) {
$('.input-color').on('mouseover', function(e){

    let color = $(this).parent().find('.color').css('background-color');
    let image = $(this).parent().find('.color').css('background-image');
    console.log(color, 'this');
    if(color) {
        $('#cover-background').show().css({'background-color': color,'width': '400px', 'height': '400px',
            'margin': '0 auto', 'position': 'absolute', 'z-index': 99, 'left': '-60%', 'top': '40%'});
    }
    if(image) {
        $('#cover-background').show().css({'background-image': image,'width': '400px', 'height': '400px',
            'margin': '0 auto', 'position': 'fixed', 'z-index':999, 'left': '20%', 'top':'30%'});
    }
});

$('.input-color').on('mouseout', function(e){

    $('#cover-background').hide();
});
});

还有一个id = cover-background的div 对于第一组属性，弹出窗口可以正常工作。 但是，单击属性之一后，onmouseover无法完成。 您可以在这里看到它：http://decoelem2.kamilane.odns.fr/16-15976-table-basse-relevable-extensible-bessy.html（单击按钮PERSONNALISER以显示第一组）

用于显示块的代码（它只是模块所有代码的一部分）：

       $output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\
                    <input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\
                    data-product-attribute="' + y + '" name="group[' + y + ']" \n\
                    value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\
                    <span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\
                       ' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\
                        title="' + attributes[l] + '">\n\
                        <span class="sr-only">' + attributes[l] + '</span>\n\
                        ' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\
                    </span>\n\
                </li>';
        }
    } 

如果需要，我可以发送文件或所有模块。

非常感谢您的帮助！

[edit]这是所有功能（我认为）：

     function generate_html_content_bloc(first, id_group, id_group_next)

{

$output = '';

class_sup = '';

for (j in fa_groups) { //on parcourt les groupes d'attributs

    groupName_id = 'fa_group_' + j;

    groups = fa_groups[j];

    name_group = groups['name'];

    y = j.replace('g_', '');

    if (!first && id_group_next != j){

        if(array_key_exists(j, tread_group)){

            $(".product-variants").append(tread_group[j]);

        }

        continue;

    }

    $output += '<div id="field_' + j + '" class="clearfix product-variants-item">';

    $output += '<span class="control-label"><strong>Choisissez : </strong>' + name_group + ' </span><br />';

    attributes = groups['attributes']; //On a ici le tableau des attributs pour le groupe

    if (groups['group_type'] == 'radio') {

        $output += '<ul id="group_' + j + '" class="radio_btn_list radio_btn_list_' + j + '">';

        $output += '<li id="li_list_0_' + j + '" class="input-container pull-xs-left float-xs-left hide-element ' + class_sup + ' attr_disabled">\n\

          <input id="g_radio_0' + j + '" class="input-radio attribute_radio g_radio_' + j + '" type="radio" data-product-attribute="' + y + '" \n\

              name="group[' + y + ']" value="0"  checked="checked" title="' + not_avialable + '" disabled="true">\n\

          <span class="radio-label radio-label-desabled">&nbsp;</span>\n\

        </li>';

      for (var k in attributes) {

        l = k;

        k = k.replace('k_','');

        if (!fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)

          continue;

        else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes

          continue;

        $output += '<li id="radio_' + k + '" class="input-container pull-xs-left float-xs-left' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' attr_disabled"' : '') + '">\n\

          <input type="radio"' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : '') + ' id="g_radio_' + j + '_' + k + '" \n\

            class="input-radio attribute_radio g_radio_' + j + '" data-product-attribute="' + y + '" name="group[' + y + ']" \n\

            value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 0);" />\n\

          <span class="radio-label">' + attributes[l] + '</span>\n\

        </li>';

      }

      $output += '</ul>';

    } else if (groups['group_type'] == 'color') {

        $output += '<ul id="group_' + j + '" class="clearfix">';

        $output += '<li id="li_list_0_' + j + '" class="float-xs-left pull-xs-left input-container color_' + j + ' selected hide-element ' + class_sup + '">\n\

            <input id="color_0_' + j + '" class="input-color" type="radio" data-product-attribute="' + j + '" name="group[' + y + ']" \n\

                value="0" checked="checked" disabled="true">\n\

            <span class="color_select color texture" style="background-image: url(' + fa_col_img_dir + 'croix.png)" title=""></span>\n\

        </li>';

        for (var k in attributes) {

          l = k;

          k = k.replace('k_','');

          if (!fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)

            continue;

          else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes

            continue;

            $output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\

                    <input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\

                    data-product-attribute="' + y + '" name="group[' + y + ']" \n\

                    value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\

                    <span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\

                       ' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\

                        title="' + attributes[l] + '">\n\

                        <span class="sr-only">' + attributes[l] + '</span>\n\

                        ' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\

                    </span>\n\

                </li>';

        }

    } else if (groups['group_type'] == 'select') {

        $output += '<select class="form-control form-control-select" name="group[' + y + ']"  data-product-attribute="' + y + '" id="group_' + j + '" \n\

            onchange="set_selected_n(\'' + j + '\', this.value,\'' + fa_key_val[j] + '\', 2);">';

        $output += '<option value="0" selected="selected" id="li_list_0_' + j + '">' + name_select + '</option>';

        for (var k in attributes) {

          l = k;

          k = k.replace('k_','');

          if (!fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)

            continue;

          else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes

            continue;

            $output += '<option value="' + k + '"' + ((fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" class="fa_disabled"' : '') + '>' + attributes[l] + '</option>';

        }

        $output += '</select>';

    }

    $output += '<span class="attribute-arrow-right arrow-'+groups['group_type']+' group_' + j + ' displaynone icon icon-arrow-right'+(((fa_attr_all && (id_group_next == j/* || first_first*/)) ? ' arrow-right-show' : ''))+'"><i class="material-icons">arrow_forward</i></span>';

  if(fa_attr_all && first_first)

    first_first = false;

  if(first || !fa_attr_all)

    $output += '</div>';

  if (first && !fa_attr_all) //si c'est lors du chargement et que c'est l'option bloc par bloc, on s'arrete à la premiere boucle

      return $output;

  if (!first && fa_attr_all){/*On affiche le résultat quand nous sommes en tout les blocs*/

    $('#field_' + id_group+' .attribute-arrow-right.group_'+ id_group).removeClass('arrow-right-show');

    $('#field_' + j).html($output);

    $output = '';

  }

}

if (first || !fa_attr_all)/*On retourne le résultat quand nous sommes en bloc par bloc*/

    return $output;

}