JQuery的追加（）在Rails的視圖提供「未捕獲的SyntaxError：無效的或意外的標記」

Question

我想動態添加/刪除選擇框的窗體上按鈕

這裏的點擊是我options/new.html.erb：

<br> 
    <h3>Add Options</h3> 
    <div class="input_options_wrap"> 
    <button class="add_options_button">+</button> 
    <%=select_tag "options[]", options_for_select(@options.pluck(:option)), class: "form-control", prompt: "Select Option" %> 
    </div> 

這顯示了一行與選擇框和選項。我希望用戶能夠選擇儘可能多的選項，但他們只需要從這個選項列表中選擇。因此，有ADD_BUTTON這裏是處理添加/上單擊刪除選擇框腳本：

<script> 
    $(document).ready(function() { 
    var max_fields = 10; //maximum input boxes allowed 
    var wrapper = $(".input_options_wrap"); //Fields wrapper 
    var add_button = $(".add_options_button"); //Add button ID 

    var x = 1; //initial text box count 
    $(add_button).click(function (e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div><%=select_tag "options[]", options_for_select(@options.pluck(:option)), class: "form-control", prompt: "Select Option" %><a href="#" class="remove_field">Remove</a></div>'); 
     } 
    }); 

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
     e.preventDefault(); 
     $(this).parent('div').remove(); 
     x--; 
    }) 
    }) 
</script> 

現在這裏是問題。在呈現這個html頁面時，我得到了Uncaught SyntaxError: Invalid or unexpected token。下面是上面的代碼（相關線路）被解析：

$(wrapper).append('<div><select class="form-control" id="options_" name="options[]"><option value="">Select Option</option><option value="book">book</option> 
<option value="copy">copy</option></select> 
</div>'); 

我相信這個例外是因爲裏面append，它期望的，而在這裏，因爲隨機換行符的「HTML代碼」一個字符串，單串不在語法上更正確。有沒有辦法解決？

Answer 1

您可以將該html放入腳本標記以用作模板並將其作爲模板中的html檢索。通過將type設置爲JavaScript以外的內容，瀏覽器將不會將其編譯爲腳本，並且內部的html也不會轉換爲dom節點。

<script type="text/template" id="select-template"> 
    <div><%=select_tag ..... %><a..></div> 
</script> 

然後改變：

$(wrapper).append('html string') 

要：

$(wrapper).append($('#select-template').html());