用jquery点击事件触发AJAX [英] Trigger AJAX with jquery click event

问题描述

我有两个下拉菜单，其中一个我试图用jquery替换单选按钮。第二个盒子通过AJAX进行更新，每次用户在第一个下拉菜单中进行选择时都会有新选项。我已经成功生成单选按钮，可以更改第一个下拉列表的值，但是当用户使用单选按钮更新第一个下拉菜单时，它不再影响第二个下拉框中的值。我对AJAX或JS并不擅长，当用户选择一个单选按钮时，我无法弄清楚如何触发AJAX加载。

我为代码墙提前道歉，林不知道什么是重要的，所以我包含了所有相关的东西。如果您想查看相关网页，可以此处。

我用来生成单选按钮的代码如下所示：

<$ p $ （函数（i，e））{
$（< input type = 'radio'name ='r'/>）
.attr（value，$（this）.val（））
.attr（checked，i == 0）
.click（function（）{
$（＃options-1）.val（$（this）.val（））;
}）
.appendTo（ （）;
$（＃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=5method =postclass =shopp产品验证> 
< div id =r>< / div> 
 
< ul class =variations> 
< li> 
< label for =options-1> Framing< / label> 
 < option value =2> Professionally Framed< / option> 
< / select>< li> 
< label for =options-2>大小< / label> 
 < option value =4> 24 x 36< / option> 
< / select>< / li> 
 
< / ul> 
 
< p>< input type =hiddenname =products [1] [product]value =1/>< input type =hiddenname =产品[1] [category]value =catalog/>< input type =hiddenname =cartvalue =add/>< input type =submitname =addtocart value =添加到购物车class =addtocart/>< / p> 
 
< / form> 
  

AJAX如下所示：

 < script type ='text / javascript'src ='http：//example.com/dev3？sjsl = colorbox，shopp，catalog，cart& amp C = 1&放大器;放大器;版本= 98239bb061a58639408323699680ad0e'>< /脚本> 
< 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 ['pricing'] = { 18770 ：{ p ：10中， i ：假， S ：假， T ： 发货 }， 25785 ：{ p ：21中， i ：真， S ：1，t：发货}，23510：{p：20，i：假，s：假，t：发货}}; 
 pricetags [1] ['menu'] = new ProductOptionsMenus（'select.category-catalog.product1.options'，true，pricetags [1] ['pricing']，0）; 
 
 }）; 
 / *]]> * / 
< / script> 
  

解决方案

当您通过js更改组合框的值时，它不会触发onChange函数，也不会触发onClick等。

您必须使用与使用组合1更新组合2相同的代码，更新组合1与无线电。

我建议将该代码放入另一个函数中，并从两个地方调用该函数。

希望它有帮助。

I have two drop down menus, one of which I am trying to replace with radio buttons using jquery. The second box is updated via AJAX with new options any time the user makes a selection in the first drop down. I have successfully generated radio buttons that change the values for the first drop down but when the user updates the first drop down menu using the radio buttons, it no longer effects values in the second drop down boxes. I am not great with AJAX or JS and I can't figure out how to trigger the AJAX load when the user selects one of radio buttons.

I apologize in advance for the wall of code, Im not sure what is important so I included everything that seemed relevant. If you want to see the page in question you can see it here.

The code I am using to generate radio buttons looks like this:

 $(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");
});

The HTML for the drop downs look like this:

<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>

The AJAX looks like this:

<script type='text/javascript' src='http://example.com/dev3?sjsl=colorbox,shopp,catalog,cart&amp;c=1&amp;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> 

解决方案

When you change the value of a Combo Box via js, it doesn't trigger the onChange function nor onClick and so on.

You'll have to use the same code you use to update Combo 2 with Combo 1 where you update Combo 1 with the Radio.

I suggest to place that code inside another function, and call that function from both places.

Hope it helps.

这篇关于用jquery点击事件触发AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！