JQuery not registering Button click

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/24116012/jquery-not-registering-button-click

标签

javascript

jquery

foreach