JQuery不注册按钮点击 [英] JQuery not registering Button click

问题描述

我有一个显示产品列表的页面。用户可以选择要订购的产品的数量，然后点击订单按钮。这应该在Cookie中引用数量和产品ID。但是目前按钮甚至没有被注册。当我点击它时，没有任何反应。

如果将按钮放在 foreach 循环之外，那么它就起作用了。有没有人知道发生了什么？

以下是产品列表的代码

 <？php if（$ products）：？> 
< ul> 
<？php foreach（$ products as $ product）：？> 
< h3 id =stock_code><？= get_field（'stock_code'，$ product-> ID）; ？>< / H3> 
< p>描述：<？= get_field（'description'，$ product-> ID）; ？>< / p为H. 
< p>每个托盘的数量：<？= get_field（'quantity_per_pallet'，$ product-> ID）; ？>< / p为H. 
 <！ - 数量下拉菜单 - > 
金额< select id =order_amount<？= $ product-> ID;？> NAME = AMT > 
< option value =0> 0< / option> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< option value =3> 3< / option> 
< / select> 
< input type =submitvalue =Add to Orderid =orderBtn/> 
<？php endforeach; ？> 
< / ul> 
 <？ endif？> 
  

这是按钮被点击

  $（＃orderBtn）。click（function（event）{
 // Show订单Box 
 $（。order-alert）。show（）; 
 event.preventDefault（）; 
 
 //创建数组
 var productArray = []; 
 
 //如果不存在Cookie，则创建一个并添加Array 
（$ .cookie（'order_cookie'）=== undefined）{
 console .log（Create a new cookie）; 
 $ .cookie（'order_cookie'，JSON.stringify（productArray），{expires：1，path：'/'}）; 
 // If cookie已经存在做
} else {
 console.log（Read the cookie）; 
 productArray = JSON.parse（$。cookie（'order_cookie'））; 
 console.log（$ .cookie（'order_cookie'））; 
 //将项追加到Array 
} 
 
 // Displ ay订单框中数组的项目数
 $（'＃order_counter'）。html（productArray.length）; 
}）; 
  

我很感谢在这件事上的任何帮助。

解决方案

不要在按钮上使用ID。你必须使用类，如果你想分配事件乘以对象。

当你使用id选择器jQuery分配事件只有第一个对象becouse ID sholud是唯一的。 / p>

更改：

  $（＃orderBtn）。click函数（event）{
 
} 
  

>

  $（。orderBtn）。click（function（event）{
 .. 
} $ b $ 
 
 
 
 < input type =submitvalue =Add to Orderid =orderBtn/> 
  
 
 $ 
 
 
 < input type =submitvalue =Add to Orderclass = orderBtn/> 
  
 
I have a page that displays a list of products. The user can select the quantity of a product to order and then click the order button. This should place a reference to the quantity and the product ID in a Cookie. However currently the button is not even being registered. When I click on it nothing happens. 

If I place the button outside of the foreach loop then it works. Does anyone know what is going on?

Below is the code for the list of products
    <?php if($products): ?>
                    <ul>
                    <?php foreach($products as $product): ?>
                    <h3 id="stock_code"><?= get_field('stock_code', $product->ID); ?></h3>
                    <p>Description: <?= get_field('description', $product->ID); ?></p>
                    <p>Quantity Per Pallet: <?= get_field('quantity_per_pallet', $product->ID); ?></p>
                    <!-- Quantity Dropdown -->
                    Amount <select id="order_amount<?= $product->ID; ?>" name="amt">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <input type="submit" value="Add to Order" id="orderBtn"/>
                    <?php endforeach;  ?>
            </ul>
  <? endif ?>
This is the code to be executed when the button is clicked
$("#orderBtn").click(function(event){
        //Show the order Box
        $(".order-alert").show();
        event.preventDefault();

        //Create the Array
        var productArray = [];   

        //If no Cookie exists, create one and add the Array
        if ($.cookie('order_cookie') === undefined) {
            console.log("Create a new cookie");
            $.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
        //If the Cookie already exists do this  
        } else {
            console.log("Read the cookie");
            productArray = JSON.parse($.cookie('order_cookie'));
            console.log($.cookie('order_cookie'));
            //Append items onto the Array
        }

        //Display the number of items in the Array in the Order Box
        $('#order_counter').html(productArray.length);
    });
I'd appreciate any help on the matter
解决方案
Don't use ID on button. You have to use class if you want to assign event to multiply objects.

When you are using id selector jQuery assign event only to first object becouse ID sholud be unique.

Change: 
$("#orderBtn").click(function(event){
..
}
To:
$(".orderBtn").click(function(event){
..
}
And HTML declaration:
<input type="submit" value="Add to Order" id="orderBtn"/>
To:
<input type="submit" value="Add to Order" class="orderBtn"/>


                        
这篇关于JQuery不注册按钮点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！