jQuery вывод .html внутри другого .html и получение непреднамеренного кодирования - как мне это исправить?

Question

У меня есть следующий код:

ajaxLoading = '\<p style="text-align:center; margin-left:auto; margin-right:auto; margin-top:200px; ' + 
'width:300px\"><img style="display:block; margin-left:auto; margin-right:auto" src="Images/ajax-loader.gif" alt="Processing Payment" />'  + 
'Processing your payment...</p>'
var errormessage = "<div style=\"padding-left:75px\"><h1 style=\"margin-top:50px\">Error</h1><p>" + data + 
"</p><p><a onClick=\"$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();" + 
"$('#divIDConfirmPaymentResult').html(" + ajaxLoading + ");RequestPayment()\"> Click here to return to payment </a></p></div>";
                        $('#divIDConfirmPaymentResult').html(errormessage); 

Соответствующая часть моего вывода в соответствии с Chrome Dev Tools такова. Как вы можете видеть, один <экранируется как & lt и разрушает остальную часть вывода. Что может быть причиной этого? </p>

<a onclick="$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();$('#divIDConfirmPaymentResult').html(&lt;p style=" text-align:center;="" margin-left:auto;="" margin-right:auto;="" margin-top:200px;="" width:300px"=""><img style="display:block; margin-left:auto; margin-right:auto" src="Images/ajax-loader.gif" alt="Processing Payment">Processing your payment...</a>

Обновление согласно ответу ниже:

Это прекрасно работает:

var errormessage = "<div style=\"padding-left:75px\"><h1 style=\"margin-top:50px\">Error</h1><p>" + data + 
                        "</p><p><a onClick=\"$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();" + 
                        "resetAjaxLoading('#divIDConfirmPaymentResult');\"> Click here to return to payment </a></p></div>";
                        $('#divIDConfirmPaymentResult').html('\'' + errormessage + '\'');   

            function resetAjaxLoading(domElement) {
                ajaxLoading = '<p style="text-align:center; margin-left:auto; margin-right:auto; margin-top:200px; ' + 
                        'width:300px\"><img style="display:block; margin-left:auto; margin-right:auto" src="Images/ajax-loader.gif" alt="Processing Payment" />'  + 
                        'Processing your payment...</p>'; 
                $(domElement).html(ajaxLoading);
            }

Answer 1

EDIT: На самом деле, я не думаю, что в вашем примере можно определить html во встроенном обработчике, например onclick . Переместите обработчик кликов в отдельное определение (в теге скрипта или в отдельном js-файле).

Вы также можете попытаться (предполагая, что ajaxLoading является переменной) отложить настройку html на после того, как пользователь щелкнет ссылку (обратите внимание, что я не помещаю содержимое переменной ajaxLoading в переменную errormessage - строку ajaxLoading будет оцениваться как значение переменной во время обработки события click):

var errormessage = "<div style=\"padding-left:75px\"><h1 style=\"margin-top:50px\">Error</h1><p>" + data + "</p><p><a onClick=\"$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();" + "$('#divIDConfirmPaymentResult').html(ajaxLoading);RequestPayment()\"> Click here to return to payment </a></p></div>";
                    $('#divIDConfirmPaymentResult').html(errormessage);