JS/JQUERY - 每個產品購買按鈕被點擊時顯示模式

Question

我有一段時間的聲明顯示我所有的產品，如：https://gyazo.com/68f2ae0dd80e21b6a5f0a7deeb49877f。我有一個JavaScript/jQuery的一段代碼，點擊時，顯示一個模式如下：https://gyazo.com/e9b4cf948ec228f221d2526244c2f7bc。我遇到的問題是，模式僅顯示當我點擊左側第一個產品上的Paypal按鈕時。當我點擊右邊的Keyvault產品上的Paypal按鈕時，雖然它是一個while循環，但它不顯示模式事件，所以它應該使用相同的名稱。

我的情態：

<div class="modal fade" id="Loading_purchase_status" style="display: none;"> 
     <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <h4 class="modal-title">Payment Status (Don't close this during a payment) <div style="float: right;"><img src="<?php echo $site_config->grabSiteSettings($con, 'site_url').'/pizza/styles/img/loading.gif'; ?>" style="width: 20px; height: 20px;"></div></h4> 
      </div> 
      <div class="modal-body"> 
      <p>Payment Status: <div id="awaiting_payment_status">Awaiting Payment on the Paypal payment page...</div></p> 
      </div> 
      <div class="modal-footer"> 
      <a class="btn btn-primary" href="<?php echo $site_config->grabSiteSettings($con, 'site_url').'/pizza/myFiles.php'; ?>">My Files</a> 
      <a class="btn btn-danger" data-dismiss="modal">Cancel</a> 
      </div> 
     </div> 
     </div> 
    </div> 

我的PayPal按鈕形式：

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" target="_blank"> 


    <input type="hidden" name="cmd" value="_xclick"> 
    <input type="hidden" name="business" value="<?php 
echo $site_config->grabSiteSettings_manual($con, 'paypal_address'); 
?>"> 
    <input type="hidden" name="item_name" value="<?php 
echo $name; 
?>"> 
    <input type="hidden" name="item_number" value="<?php 
echo $id; 
?>"> 
    <input type="hidden" name="amount" value="<?php 
echo $price; 
?>"> 
    <input type="hidden" name="quantity" value="1"> 
    <input type="hidden" name="currency_code" value="USD"> 
    <input type="hidden" name="custom" value="username=<?php 
echo $username; 
?>&product=<?php 
echo $name; 
?>"> 
    <input type="hidden" name="notify_url" value="<?php 
echo $site_callback; 
?>"> 
    <input type="hidden" name="cancel_return" value="<?php 
echo $site_return_canceled; 
?>"> 

    <button type="submit" class="btn btn-danger" id="paypal_submit" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float:left; margin-left: 9%;"> 
     <i class="fa fa-paypal"></i>aypal 
    </button> 
    <button type="submit" class="btn btn-danger" disabled="true" style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float: right; margin-right: 9%;"> 
     <i class="fa fa-btc"></i>itcoin 
    </button> 
</form> 

我的JavaScript/jQuery的：

 $(document).ready(function() { 
     $('#Loading_purchase_status').modal('hide'); 

     $('#paypal_submit').click(function() { 
      $('#Loading_purchase_status').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); 
      $('#Loading_purchase_status').modal('show'); 
     }); 
    }); 

Answer 1

非常基本的錯誤。你需要使用類名而不是id。因爲如果你有很多通過循環呈現相同id的項目，瀏覽器會更改id。

所以這裏的工作都是圍繞

assigne一個類名例如PayPal按鈕

<button class="modalopenerbutton" 

然後編寫腳本如下

$(document).ready(function() { 
     $('#Loading_purchase_status').modal('hide'); 

     $('.modalopenerbutton').click(function() { 
      $('#Loading_purchase_status').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); 
      $('#Loading_purchase_status').modal('show'); 
     }); 
    });