javascript - 无论您在何处单击跨度，都会提交表单，但由于表单 ID 重复而无法正常运行

Question

<form id = "form_options" method="get" action= "../menu-option" class= "flex">
                <span class="deliveryItem pointer vertical-top textCenter view_it
                <?php if($filter[0] == 'Y'){echo "vegan ";}
                if($filter[1] == 'Y'){echo "vegetarian ";}
                if($filter[2] == 'Y'){echo "pescetarian ";}
                if($filter[3] == 'Y'){echo "dairy-free ";}
                if($filter[4] == 'Y'){echo "egg-free ";}
                if($filter[5] == 'Y'){echo "fish-free ";}
                if($filter[6] == 'Y'){echo "shellfish ";}
                if($filter[7] == 'Y'){echo "tree ";}
                if($filter[8] == 'Y'){echo "peanut ";}
                if($filter[9] == 'Y'){echo "soy ";}
                if($filter[10] == 'Y'){echo "total-fat ";}
                if($filter[11] == 'Y'){echo "saturated-fat ";}
                if($filter[12] == 'Y'){echo "cholesterol ";}
                if($filter[13] == 'Y'){echo "sodium ";}
                if($filter[14] == 'Y'){echo "protein ";}
                if($filter[15] == 'Y'){echo "calories ";}
                ?>">
                <?php echo '<input type="hidden" name="meal_id" value="'.$meal_id1.'">';?>
                 <img src="<?php echo $image1; ?>" width="280px" height= "200px;" class="foodImage">
                <div class="menuDelivery">
                <h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name1;?> </h3>
                <p class= "OldStandardItalic text-black font2 vertical1"> <?php echo $subtitle1;?> </p>
                <hr>
                <span class="open_sanssemibold text-black">
                <?php   if(count($prices1) > 1){print_r($firstEle ." - ". $lastEle);}
                else{ print_r($price1);}
                ?>
                <br>
                </span>
                <span class="text-black font2">
                <?php   
                $counter = 0;
                if(mysqli_num_rows($result_meal_option) > 1)
                while ($row_meal_option = mysqli_fetch_assoc($result_meal_option)) {
                    $counter ++;
                            $q_filters = "select * from main_filters where meal_options_id = '{$row_meal_option['id']}'";
                            $result_filters = mysqli_query($conn,$q_filters);
                             $row_filterd= mysqli_fetch_assoc($result_filters);



                             ?>

                             <span class="deliveryItem1 
                             <?php 
                             if($row_filterd["vegan"] == 'Y'){echo "vegan ";}
                             if($row_filterd["vegetarian"] == 'Y'){echo "vegetarian ";}
                             if($row_filterd["pescatarian"] == 'Y'){echo "pescetarian ";}
                             if($row_filterd["dairy-free"] == 'Y'){echo "dairy-free ";}
                             if($row_filterd["egg-free"] == 'Y'){echo "egg-free ";}
                             if($row_filterd["fish-free"] == 'Y'){echo "fish-free ";}
                             if($row_filterd["shellfish-free"] == 'Y'){echo "shellfish ";}
                             if($row_filterd["tree nut-free"] == 'Y'){echo "tree ";}
                             if($row_filterd["peanut-free"] == 'Y'){echo "peanut ";}
                             if($row_filterd["soybean-free"] == 'Y'){echo "soy ";}
                             if($row_filterd["low-total-fat"] == 'Y'){echo "total-fat ";}
                             if($row_filterd["low-saturated-fat"] == 'Y'){echo "saturated-fat ";}
                             if($row_filterd["low-cholesterol"] == 'Y'){echo "cholesterol ";}
                             if($row_filterd["low-sodium"] == 'Y'){echo "sodium ";}
                             if($row_filterd["protein(25g)"] == 'Y'){echo "protein ";}
                             if($row_filterd["calories(450)"] == 'Y'){echo "calories ";}

                             ?>

                             ">
                             <?php 
                             //print_r($row_filterd);die;
                             echo($counter>1 ? "| ":""). $row_meal_option['label']. "</span>";
                        }  ?>

                <br>
                </span>
                <button type="submit" class="view white cbtn1 open_sansbold check_menu">View/Add</button>
                </div>
                </span>
                </form>

我有这段代码，我的结果是这样的:

但是我希望有不止一个表单，照片和跨度内的其他所有内容都可以单击，而不仅仅是“查看/添加”按钮，但是现在当我这样做时，它只提交显示的第一个表单，甚至如果我点击其他的，唯一发送的meal_id就是第一个。我认为这与我的表单 ID 有关，但是当我将其更改为类时，一切都会发生冲突，我该如何解决这个问题？ 我只是使用这段 JavaScript 代码来使跨度内的所有内容都可点击:

$('.view_it').on('click', function(e){
    e.preventDefault();
    $('#form_options').submit();
});

Answer 1

id 属性用于唯一地is标识页面上的 DOM 元素。不要重复。

<button type="button" ...

$('.view_it').on('click', function(e){
    $(this).closest('form').submit();
});