JQuery Mobile 会干扰 Javascript 还是格式问题？
Posted
技术标签:
【中文标题】JQuery Mobile 会干扰 Javascript 还是格式问题？【英文标题】：Does JQuery Mobile interfere with Javascript or is it an issue with formatting? 【发布时间】：2012-11-24 11:52:31 【问题描述】：我知道代码可以工作，因为它在 JSfiddle 中进行了测试，但是将其放入此 html 会导致错误，除非 JQuery Mobile 干扰？
所以我已经剥离了 CSS 以进行测试，但无论我带走什么，它都会在向列表中添加新项目时导致错误。
这是工作版本： DEMO
<title>Checklist</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script>
$('#add').on('click', function (e)
var $this = $(this);
var $firstRow=$this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();
var input = $newRow.find(':input').remove();
input.prop('checked', false);
$newRow.empty().append(input).append(' '+$('#textinput4').val());
$newRow.insertAfter($firstRow);
);
</script>
</head>
<body>
<div data-role="page" id="check">
<div data-theme="a" data-role="header">
<h3>
Checklist
</h3>
<a data-role="button" data-transition="fade" href="#about" class="ui-btn-left">
Back
</a>
</div>
<div data-role="content" style="padding: 15px">
<div data-role="collapsible-set">
<form name="emailform" enctype="multipart/form-data" action="form-to-email.php" method="get">
<div data-role="fieldcontain">
<label for='name'>Festival name: </label><br>
<input type="text" name="name">
<h3>
Before you go
</h3>
<fieldset data-role="controlgroup" data-type="vertical">
<legend>
</legend>
<input name="checkbox62" id="checkbox62" type="checkbox" />
<label for="checkbox62">
Charge all batteries. Phones, cameras etc
</label>
<input name="checkbox63" id="checkbox63" type="checkbox" />
<label for="checkbox63">
Save your friends numbers
</label>
<input name="checkbox64" id="checkbox64" type="checkbox" />
<label for="checkbox64">
Check out festival site rules!
</label>
<tr><td><input name="checkbox65" id="checkbox65" type="checkbox" /></td>
<td><label for="checkbox65">Get directions for where you are going</label></td></tr>
</fieldset>
<h3>My items</h3>
<table id="myTable">
<tr>
<td>
<label for="checkbox65">
<input name="checkbox65" class="checkbox65" type="checkbox" />
Get directions for where you are going
</label>
</td>
</tr>
<tr>
<td>
<fieldset data-role="controlgroup">
<label for="textinput4">
Add new item
<input name="new_item" id="textinput4" placeholder="" value="" type="text" />
</label>
</fieldset>
<button id="add">Add</button>
</td>
</tr>
</table>
</form>
【问题讨论】：
如果没有正确的type 属性，您的脚本可能无法运行。尝试更改您的<script> 标签以包含type。示例：<script type="text/javascript">
HTML5 中的type 属性不再需要。 w3schools.com/html5/att_script_type.asp
@andleer 我没有意识到这一点。但是，为了向后兼容，不应该包含type 吗？
jQuery Mobile... 几乎可以肯定它是在 HTML5 环境中运行的。
此标记格式不正确。我无法对它做出正面或反面。 <tr> 在<fieldset> 内。等等。
【参考方案1】：
这只是你的事件处理程序被绑定到早期的一个例子。当您尝试将单击事件绑定到添加按钮时，添加按钮尚未加载到 DOM 中。您可以做的一件事就是将脚本移动到正文的末尾。
例如，更好的解决方案是使用事件委托
$(document).on('click', '#add', function(e)
var $this = $(this);
var $firstRow = $this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();
var input = $newRow.find(':input').remove();
input.prop('checked', false);
$newRow.empty().append(input).append(' ' + $('#textinput4').val());
$newRow.insertAfter($firstRow);
);
（出于性能原因，您可能仍希望将脚本移至页面末尾，以免阻止页面加载）。
【讨论】：
以上是关于JQuery Mobile 会干扰 Javascript 还是格式问题？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile 干扰 Google Maps v3 API