Question

我遇到了一個問題，涉及多個嵌入/交替引號，我希望有人可以提供幫助。下面是相關的代碼...

displayMessage(

    "post success!", 

    "<p style='margin-top: 15px; margin-bottom: 15px'>if you'd like to share your post...</p> 

    <a onclick='openSharePopup("+textA+","+numberA+","+numberB+")' style='cursor: pointer; font-size:16px'> 
     share 
    </a>" 

); 

function displayMessage(heading, text){ 
    $("#displayMessageHeadingDiv").html(heading); 
    $("#displayMessageBodyDiv").html(text); 
    $("#displayMessageParentDiv").css("display","block"); 
} 

displayMessage（）後，用戶成功張貼在網站上的東西被調用，完美的作品，除非「TEXTA」包含一個單引號（例如像「小李的意見」）

問題是（我認爲）是，儘管textA被封裝在雙引號內 - 那些雙引號已經在我的onclick屬性的單引號內 - 它本身還在displayMessage的整個第二個參數的更多雙引號內。

我以前認爲，單引號和雙引號之間的交替可以無限期地繼續，但這個例子似乎表明否則。我也嘗試過用這些替代方法打破textA中的任何引號，但都沒有工作...

textA = JSON.stringify(textA).replace(/&/, "&").replace(/"/g, """); 

textA = textA.replace("'","\'"); 

任何想法，我要去哪裏錯了呢？

Answer 1

您的方法根本錯誤。手動創建內聯事件處理程序幾乎總是錯誤的方法。

更好的解決方案是，例如：

var shareLink = $('<a>share</a>') 
        .css({ cursor: 'pointer', 'font-size': '16px' }) 
        .click(function() { 
          openSharePopup(textA , numberA, numberB); 
         }); 

var msg = $("<p>if you'd like to share your post...</p>") 
       .css({ 'margin-top': '15px', 'margin-bottom': '15px' }); 

displayMessage("post success!", shareLink.add(msg)); 

function displayMessage(heading, text){ 
    $("#displayMessageHeadingDiv").html(heading); 
    $("#displayMessageBodyDiv").empty().append(text); 
    $("#displayMessageParentDiv").show(); 
} 

基本上你應該創建的元素，通過代碼添加一個單擊處理程序，並直接將這些元素添加到容器。這樣你就不必考慮使用什麼樣的引用以及在哪裏。

（作爲另一種風格方面說明，這將是更好的使用CSS類風格的元素，而不是內聯樣式。）