如何在移动设备上调试不工作的jQuery？

Question

这是我的JavaScript代码，没有正确执行。我想我哪里出了问题。

我想添加一个搜索栏，以便在响应菜单navbar中创建搜索选项。然而，它显示在桌面上，而不是在移动菜单中。这就是为什么我要使用jQuery手动添加这个。

​

$(document).ready(function() {
    $('ul').append("
            <li class='fusion-custom-menu-item fusion-main-menu-search fusion-last-menu-item'>
            <a class='fusion-main-menu-icon'></a>
            <div class='fusion-custom-menu-item-contents'>
                <form action='http://www.heilmancenter.com/' method='get' class='searchform' role='search'>
                    <div class='search-table'>
                        <div class='search-field'>
                            <input type='text' placeholder='Search ...' class='s' name='s' value=''>
                        </div>
                        <div class='search-button'>
                            <input type='submit' value='' class='searchsubmit'>
                        </div>
                    </div>
                    <input type='hidden' value='en' name='lang'>
                </form>
            </div>
        </li>
    ");
});

​

Answer 1

从html中删除新行:要么将所有行连接起来，要么将html代码放在一行中。

Answer 2

第一个问题是您错选了函数关键字，第二个问题是您正在创建一个多行字符串，但是引擎不知道它，并将第二行解释为一条指令。您需要采取预防措施，例如在任何行的末尾添加一个反斜杠。

​

jQuery(document).ready(function(){
   jQuery('ul').append("<li class='fusion-custom-menu-item fusion-  main-menu\
   -search fusion-last-menu-item'><a class='fusion-main-menu-icon'></a><div\
   class='fusion-custom-menu-item-contents'><form\
   action='http://www.heilmancenter.com/' method='get' class='searchform'\
   role='search'>\
	<div class='search-table'>\
		<div class='search-field'>\
			<input type='text' placeholder='Search ...' class='s' name='s'\
   value=''>\
		</div>\
		<div class='search-button'>\
			<input type='submit' value='' class='searchsubmit'>\
		</div>\
	</div>\
   <input type='hidden' value='en' name='lang'></form>\
   </div></li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​