如何使按钮点击在自己的div中获取数据属性

Question

<?php 
//jQuery calls this code to save changes to inventory
if(isset($_POST['inventoryID'])){
//Filter all incoming fields
$attributeID = preg_replace('#[^0-9]#i', '', $_POST['attrID']);	
$inventoryID = preg_replace('#[^0-9]#i', '', $_POST['inventoryID']);
$inventorySKU = preg_replace('#[^a-z0-9-]#i', '', $_POST['inventorySKU']);	
$inventorySize = preg_replace('#[^a-z0-9]#i', '', $_POST['inventorySize']);
$inventoryStock = preg_replace('#[^0-9]#i', '', $_POST['inventoryStock']);
$inventoryStatus = preg_replace('#[^a-z]#i', '', $_POST['inventoryStatus']);	
//change letter case
$inventorySKU = strtoupper($inventorySKU);	
$inventorySize = ucwords(strtolower($inventorySize));
	//Check missing fields
	if(!empty($inventorySKU) && !empty($inventorySize) && !empty($inventoryStock) && !empty($inventoryStatus)){ 	
		//Update row for product into table since there is no changes to image made
		$sql = "UPDATE Inventory SET SKU = '$inventorySKU', Size = '$inventorySize', Stock = '$inventoryStock', Status = '$inventoryStatus' WHERE PK_InventoryID = '$inventoryID' AND FK_AttributesID = '$attributeID'";
		$query = mysqli_query($connection, $sql);
		if($query){
			echo 'Your inventory has been successfully updated!';
		}else{
			echo 'FAILURE: Inventory not updated!';
		}
	}
	exit();	
}
?>

$(document).on('click', '#saveInvSubBtn', function() {
// Obtain the inventory and attribute ID
var iID = $('.deleteInvBtn').data("iid");
var attrID = $('.deleteInvBtn').data("attrid");
var form_data = new FormData();
form_data.append('inventorySKU', $("#invSKU").val());
form_data.append('inventorySize', $("#invSize").val());
form_data.append('inventoryStock', $("#invStock").val());
form_data.append('inventoryStatus', $("#invStatus").val());
$.ajax({
url: 'edit_inventory.php', // point to server-side PHP script 
type: 'POST',
data: form_data,
dataType: 'text', // what to expect back from the PHP script
cache: false,
contentType: false,
processData: false,
success: function(data) { // display success(i.e, echo response) response from the PHP script
if (data === 'Your inventory has been successfully updated!') {
//do something
} else {
//do something else
}
},
error: function() { // display error response(i.e, server timeout etc) from the PHP script
//display error msg
}
});
});

我有一个div(由文本字段和保存按钮组成)，如下所示。这个div由PHP脚本响应，并且是动态的，即它通过echo函数根据PHP WHILE循环需要多次复制自己。div由表中的数据组成。如果有2行数据，div会自我复制两次。

我想要实现的是，当单击保存按钮时，jQuery应该获得按钮类"deleteInvBtn"的数据属性和ITSWOWN DIV内所有文本字段的值。

只有当单击第一个div保存按钮时，这才有效。当单击第二个div保存按钮时，jQuery从THEFIRSTDIV中获取文本字段的数据属性和值，这不是我所需要的。我知道Jquery点击事件会从HTML中获得第一个匹配的ID。请问我该怎么解决这个问题？请注意，下面或实际脚本中显示的两个div都由相同的类或ID组成。

我试着在谷歌上搜索，但没有成功。我尝试将数据属性附加到按钮本身，但仍然无法获取文本字段的值。

//This is Div 1
<div class="flex-container-col">
<form onSubmit="return false;">
<div>
<button class="deleteInvBtn" data-iid="5" data-attrid="67" 
title="Delete Inventory"> 
<img src="../images/bin.png" width="100%"></button>
															 
<label for="invSKU">SKU</label>
	   <input type="text" class="form-text-no-border" id="invSKU" value="BSD-LALA40S">
</div>
														 
<div>
	    <label for="invSize">SIZE</label>
	    <input type="text" class="form-text-no-border" id="invSize" value="Small">
</div>
														 
<div class="flex-container-row">
	    <div class="flex-col-50">
	      <label for="invStock">STOCK</label>
	      <input type="text" class="form-text-no-border"                      id="invStock" value="11">
</div>
															 
<div class="flex-col-50">
	      <label for="invStatus">STATUS</label>
	      <select class="form-text-no-border" id="invStatus">
	        //some option statement here
	      </select>
	    </div>
</div>	
														 
<div class="flex-container-row">
	    <input type="button" class="form-btn" id="saveInvSubBtn" 
value="SAVE">
</div>
</form>	
</div>
//This is Div 2. Same as above but with diffrent values
<div class="flex-container-col">
<form onSubmit="return false;">
<div>
<button class="deleteInvBtn" data-iid="8" data-attrid="84" 
title="Delete Inventory"> 
<img src="../images/bin.png" width="100%"></button>
															 
<label for="invSKU">SKU</label>
	   <input type="text" class="form-text-no-border" id="invSKU" value="KCD-GERA40S">
</div>
														 
<div>
	    <label for="invSize">SIZE</label>
	    <input type="text" class="form-text-no-border" id="invSize" value="Medium">
</div>
														 
<div class="flex-container-row">
	    <div class="flex-col-50">
	      <label for="invStock">STOCK</label>
	      <input type="text" class="form-text-no-border"                      id="invStock" value="31">
</div>
															 
<div class="flex-col-50">
	      <label for="invStatus">STATUS</label>
	      <select class="form-text-no-border" id="invStatus">
	        //some option statement here
	      </select>
	    </div>
</div>	
														 
<div class="flex-container-row">
	    <input type="button" class="form-btn" id="saveInvSubBtn" 
value="SAVE">
</div>
</form>	
</div>

单击div 1保存按钮时，应获得div 1"deleteInvBtn"数据属性和div 1中的文本字段值。同样，当单击div 2保存按钮时，它应该获得div 2"deleteInvBtn"数据属性和div 2中的文本字段值。

Answer 1

您可以按照以下方式进行操作：

//try to give the button a specific class instead of .form-btn for this purpose
$('.form-btn').click(function(){
//from the clicked button find parent with type form then find id of the text field, then get the value.
alert($(this).parents('form').find('#invSKU').val());

//similarly for other elements.
alert($(this).parents('form').find('.deleteInvBtn').data('attrid'));
alert($(this).parents('form').find('.deleteInvBtn').data('iid'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//This is Div 1
<div class="flex-container-col">
<form onSubmit="return false;">
<div>
<button class="deleteInvBtn" data-iid="5" data-attrid="67" 
title="Delete Inventory"> 
<img src="../images/bin.png" width="100%"></button>
															 
<label for="invSKU">SKU</label>
	   <input type="text" class="form-text-no-border" id="invSKU" value="BSD-LALA40S">
</div>
														 
<div>
	    <label for="invSize">SIZE</label>
	    <input type="text" class="form-text-no-border" id="invSize" value="Small">
</div>
														 
<div class="flex-container-row">
	    <div class="flex-col-50">
	      <label for="invStock">STOCK</label>
	      <input type="text" class="form-text-no-border"                      id="invStock" value="11">
</div>
															 
<div class="flex-col-50">
	      <label for="invStatus">STATUS</label>
	      <select class="form-text-no-border" id="invStatus">
	        //some option statement here
	      </select>
	    </div>
</div>	
														 
<div class="flex-container-row">
	    <input type="button" class="form-btn" id="saveInvSubBtn" 
value="SAVE">
</div>
</form>	
</div>
//This is Div 2. Same as above but with diffrent values
<div class="flex-container-col">
<form onSubmit="return false;">
<div>
<button class="deleteInvBtn" data-iid="8" data-attrid="84" 
title="Delete Inventory"> 
<img src="../images/bin.png" width="100%"></button>
															 
<label for="invSKU">SKU</label>
	   <input type="text" class="form-text-no-border" id="invSKU" value="KCD-GERA40S">
</div>
														 
<div>
	    <label for="invSize">SIZE</label>
	    <input type="text" class="form-text-no-border" id="invSize" value="Medium">
</div>
														 
<div class="flex-container-row">
	    <div class="flex-col-50">
	      <label for="invStock">STOCK</label>
	      <input type="text" class="form-text-no-border"                      id="invStock" value="31">
</div>
															 
<div class="flex-col-50">
	      <label for="invStatus">STATUS</label>
	      <select class="form-text-no-border" id="invStatus">
	        //some option statement here
	      </select>
	    </div>
</div>	
														 
<div class="flex-container-row">
	    <input type="button" class="form-btn" id="saveInvSubBtn" 
value="SAVE">
</div>
</form>	
</div>