使用jquery点击事件触发AJAX
我有两个下拉菜单,其中一个我试图用jquery替换单选按钮。第二个盒子通过AJAX进行更新,每次用户在第一个下拉菜单中进行选择时都会有新选项。我已经成功生成单选按钮,可以更改第一个下拉列表的值,但是当用户使用单选按钮更新第一个下拉菜单时,它不再影响第二个下拉框中的值。我对AJAX或JS并不擅长,当用户选择一个单选按钮时,我无法弄清楚如何触发AJAX加载。使用jquery点击事件触发AJAX
我很抱歉代码的墙,我不知道什么是重要的,所以我包括了一切似乎相关。如果你想看到有问题的页面,你可以看到它here.
的代码我使用生成单选按钮看起来像这样:
$(function(){
$("#options-1 option").each(function(i, e) {
$("<input type='radio' name='r' />")
.attr("value", $(this).val())
.attr("checked", i == 0)
.click(function() {
$("#options-1").val($(this).val());
})
.appendTo("#r");
$("#options-1").change(function(){
$("input[name='r'][value='"+this.value+"']").attr("checked","checked");
});
});
});
$("#options-1").change(function(){
$("input[name='r'][value='"+this.value+"']").attr("checked","checked");
});
的下拉菜单中的HTML这个样子:
<form action="http://example.com/dev3/?page_id=5" method="post" class="shopp product validate">
<div id="r"></div>
<ul class="variations">
<li>
<label for="options-1">Framing</label>
<select name="products[1][options][]" class="category-catalog product1 options" id="options-1"><option value="1">Print Only (Unframed)</option>
<option value="2">Professionally Framed</option>
</select><li>
<label for="options-2">Size</label>
<select name="products[1][options][]" class="category-catalog product1 options" id="options-2"><option value="3">12 x 8</option>
<option value="4">24 x 36</option>
</select></li>
</ul>
<p><input type="hidden" name="products[1][product]" value="1" /><input type="hidden" name="products[1][category]" value="catalog" /><input type="hidden" name="cart" value="add" /><input type="submit" name="addtocart" value="Add to Cart" class="addtocart" /></p>
</form>
的AJAX看起来像这样:
<script type='text/javascript' src='http://example.com/dev3?sjsl=colorbox,shopp,catalog,cart&c=1&ver=98239bb061a58639408323699680ad0e'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var ShoppSettings = {
ajaxurl: "http://example.com/dev3/wp-admin/admin-ajax.php",
cp: "1",
c: "$",
p: "2",
t: " ",
d: ".",
g: "3",
nocache: "",
opdef: ""
};
var pricetags = {};
jQuery(window).ready(function(){ var $ = jqnc();
pricetags[1] = {};
pricetags[1]['pricing'] = {"18770":{"p":10,"i":false,"s":false,"t":"Shipped"},"25785":{"p":21,"i":true,"s":"1","t":"Shipped"},"23510":{"p":20,"i":false,"s":false,"t":"Shipped"}};
pricetags[1]['menu'] = new ProductOptionsMenus('select.category-catalog.product1.options',true,pricetags[1]['pricing'],0);
});
/* ]]> */
</script>
当您通过js更改组合框的值时,它不会触发onChange功能,也不会触发onClick等。
您必须使用与使用无线电更新组合1的组合1更新组合2相同的代码。
我建议将该代码放在另一个函数中,并从两个地方调用该函数。
希望它有帮助。
是的,我认为我遵循你的说法,我的大问题是我没有创建AJAX脚本,我不知道它是如何更新的。我查看了代码,除了为单选按钮创建的处理程序之外,似乎没有任何onEvent处理程序。任何想法如何ajax被触发? – Thomas 2010-10-21 03:03:51
是的,代码根本不清楚,如果你可以提供更多关于你正在使用的信息,你如何填充组合框?如果你想切换的选项都在html中,那甚至不是ajax,那是纯粹的客户端,带有js的html ...并且你不能直接使用Radio列表而不是转换组合吗? – Rama 2010-10-21 03:31:04
它是一个我无法修改的商业插件。为了记录,它的wordpress电子商务插件叫做Shopp。因此,我无法替换HTML。它可能不是一个AJAX的东西 - 我只是认为这是因为它将新的信息引入到下拉列表中,而无需重新加载页面。你可以在这里看到这个脚本:http://designvillain.com/dev3/?page_id=4&shopp_pid=1下拉菜单的选项被拉出了一个数据库(我假设),它们通过CMS插入(wordpress )。说实话,我不知道它是如何工作的 - 这是一种急需的工作,我没有机会去研究它。 – Thomas 2010-10-21 03:35:12
我倾向于将更多的成功绑定事件处理程序添加到DOM后添加到新元素。 – sje397 2010-10-21 02:53:47
好的,我移动了绑定事件处理程序,还有其他建议吗?你知道更新事件是如何被触发的吗? – Thomas 2010-10-21 04:34:25