[英]AJAX call not working on jQuery toggle
为了使我的jQuery切换更易于管理; 我正在尝试通过AJAX调用成功提取其内容,但是我的AJAX调用会杀死我的切换按钮-关于我在这里做错什么的任何指针?
<script>
$(document).ready(function() {
$('#toggle3').click(function(){
var $tog = $('.toggle');
$tog.hide(1000);
$.ajax({
url: 'path/to/my/script.php',
type: 'GET', //this is default anyway, only for verbosity
success: function (fields){
$tog.html(fields);
$tog.slideToggle(1000);
}
});
});
});
</script>
Script.php本质上是一种形式,嵌套在div中; 如下所示:
<div style="font-size: 12px; color: #000; text-align: left; padding-left: 15px; padding-top: 20px;">
<form>
<br>Back wheel color?
<br>
<input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4">Purple</span>
<br>
<input type="radio" name="backwheel" value="White">White</br>
<input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span>
</br>
<input type="radio" name="backwheel" value="Blue">Blue</br>
<input type="radio" name="backwheel" value="Tan">Tan</br>
<input type="radio" name="backwheel" value="Grey">Grey</br>
<input type="radio" name="backwheel" value="Pink">Pink</br>
<input type="radio" name="backwheel" value="Red">Red</br>
<input type="radio" name="backwheel" value="Yellow">Yellow</br>
<input type="radio" name="backwheel" value="Black">Black</br>
<input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span>
</br>
</form>
</span>
</form>
<br>Front Wheel (if different)
<br>
<form>
<br>Front wheel color?
<br>
<input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4">Purple</span>
<br>
<input type="radio" name="backwheel" value="White">White</br>
<input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span>
</br>
<input type="radio" name="backwheel" value="Blue">Blue</br>
<input type="radio" name="backwheel" value="Tan">Tan</br>
<input type="radio" name="backwheel" value="Grey">Grey</br>
<input type="radio" name="backwheel" value="Pink">Pink</br>
<input type="radio" name="backwheel" value="Red">Red</br>
<input type="radio" name="backwheel" value="Yellow">Yellow</br>
<input type="radio" name="backwheel" value="Black">Black</br>
<input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span>
</br>
</form>
</div>
<div id="next"><a href="#" id="toggle3">Check Out!<img src="http://northbrooklyncollective.com/wp-content/uploads/2013/11/519629-129_ArrowRight-128.png" class="tool"></a>
</div>
原来起作用的代码(如下):
$(function() {
$('#toggle3').click(function () {
$('.toggle').hide('1000');
$('.toggle').html('<div style="font-size: 12px; color: #000; text-align: left; padding-left: 15px; padding-top: 20px;"><form><br>Back wheel color?<br><input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4"><img src="http://ecx.images-amazon.com/images/I/41S7CRzpV3L._AA160_.jpg" style="max-height: 100px;">Purple</span><br><input type="radio" name="backwheel" value="White">White</br><input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span></br><input type="radio" name="backwheel" value="Blue">Blue</br><input type="radio" name="backwheel" value="Tan">Tan</br><input type="radio" name="backwheel" value="Grey">Grey</br><input type="radio" name="backwheel" value="Pink">Pink</br><input type="radio" name="backwheel" value="Red">Red</br><input type="radio" name="backwheel" value="Yellow">Yellow</br><input type="radio" name="backwheel" value="Black">Black</br><input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span></br></form></span></form><br>Front Wheel (if different)<br><form><br>Front wheel color?<br><input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4">Purple</span><br><input type="radio" name="backwheel" value="White">White</br><input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span></br><input type="radio" name="backwheel" value="Blue">Blue</br><input type="radio" name="backwheel" value="Tan">Tan</br><input type="radio" name="backwheel" value="Grey">Grey</br><input type="radio" name="backwheel" value="Pink">Pink</br><input type="radio" name="backwheel" value="Red">Red</br><input type="radio" name="backwheel" value="Yellow">Yellow</br><input type="radio" name="backwheel" value="Black">Black</br><input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span></br></form></div><div id="next"><a href="#" id="toggle3">Check Out!<img src="http://northbrooklyncollective.com/wp-content/uploads/2013/11/519629-129_ArrowRight-128.png" class="tool"></a></div>');
$('.toggle').slideToggle('1000');
return false;
});
});
在这种情况下,问题在于变量名($ tog)以美元符号开头。 尽管从技术上讲这是一个有效的Javascript变量名,但它与以$开头的jQuery库冲突。
虽然PHP将$用作变量名,但这在Javascript中不是标准的。
您可以按以下方式更新代码来解决:
<script>
$(document).ready(function() {
$('#toggle3').click(function(){
var tog = $('.toggle');
tog.hide(1000);
$.ajax({
url: 'path/to/my/script.php',
type: 'GET', //this is default anyway, only for verbosity
success: function (fields){
tog.html(fields);
tog.slideToggle(1000);
}
});
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.