Question

我有一个付款页面，显示了几个付款选项，如果付款选项等于10，它会显示支付选项支持的银行列表。

根据点击的银行，我生成一个带有正确付款网址的按钮。

我的问题是，当我检查toppaymentopt单选按钮时，脚本只会触发一次ajax帖子。

但是我想在显示的下拉列表中点击银行时再次发帖。

我该怎么做？

这是我尝试的代码（不幸的是，它没有工作）：

tpj('#checkoutform').on('change', 'input[name="toppaymentopt"]', function () {
  if(tpj(this).attr("id") == '10'){
    tpj('#checkoutform').on('change', '#idealbank > option', function () {
      var $idealbanken = tpj('#idealbank > option').val();
    });
    tpj("#idealbank").show();
  }else{
    var $idealbanken = '';
    tpj("#idealbank").hide();
  }

  // Laat een loading gif zien voor wanneer de afrekenen link wordt gegenereerd
  tpj(".buttoncheckout").html("<img class='loadingif' src='images/loading.gif'>");
  // Check of de afwijkend adres checkbox is aangeklikt
  if (tpj('input[name="checkbox"]').prop('checked')) {
    $afwijkendpostcode = tpj('input[name="billing_postcodeafw"]').val(),
    $afwijkendhuisnummer = tpj('input[name="billing_housenumberafw"]').val(),
    $afwijkendstraat = tpj('input[name="straatafw"]').val(),
    $afwijkendplaats = tpj('input[name="plaatsafw"]').val();
  }else{
    $afwijkendpostcode = '',
    $afwijkendhuisnummer = '',
    $afwijkendstraat = '',
    $afwijkendplaats = '';
  }

  var url = 'includes/betaal.php',
  $betaalid = tpj(this).attr("id"),
  $bedrag = tpj('input[name="totaalbedrag"]').val(),
  $voornaam = tpj('input[name="billing_first_name"]').val(),
  $achternaam = tpj('input[name="billing_last_name"]').val(),
  $mail = tpj('input[name="billing_email"]').val();

  var posting = tpj.post( url, {
    betaalid: $betaalid,
    bedrag: $bedrag,
    voornaam: $voornaam,
    achternaam: $achternaam,
    mail: $mail,
    afwijkendpostcode: $afwijkendpostcode,
    afwijkendhuisnummer: $afwijkendhuisnummer,
    afwijkendstraat: $afwijkendstraat,
    afwijkendplaats: $afwijkendplaats,
    idealbanken: $idealbanken
  } );
  // Stop het resultaat in een div met de class .adresscript
  posting.done(function( data ) {
    tpj( ".buttoncheckout" ).empty().append( data );
  });
});

这是我从PHP文件生成的付款清单：

<div id="payment" class="kl-store-checkout-payment">
   <ul class="payment_methods methods">
      <li>
         <input type="radio" name="toppaymentopt" id="10"> <img src="https://admin.pay.nl/images/payment_profiles/10.gif"> <label> iDEAL</label> 
         <select class="bankdropdown" id="idealbank" style="display: inline-block;">
            <option value="1">ABN Amro</option>
            <option value="2">Rabobank</option>
            <option value="4">ING Bank</option>
            <option value="5">SNS Bank</option>
            <option value="8">ASN Bank</option>
            <option value="9">RegioBank</option>
            <option value="10">Triodos Bank</option>
            <option value="11">Van Lanschot Bankiers</option>
            <option value="12">Knab bank</option>
            <option value="5080">Bunq</option>
         </select>
      </li>
   </ul>
</div>

我知道我可以复制粘贴ajax帖子，但必须可以用更少的代码行来完成这项工作。

Answer 1

tpj(document).ready(function(){

tpj('#checkoutform').on('change', 'input[name="toppaymentopt"]', function () {
  if(tpj(this).attr("id") == '10'){
    tpj("#idealbank").show();
  }else{
    var $idealbanken = '';
    tpj("#idealbank").hide();
  }
});

tpj('#checkoutform').on('change', '#idealbank', function () {
      var $idealbanken = tpj('#idealbank').val();
      run_ajax($idealbanken);
});


function run_ajax($idealbanken){

  // Laat een loading gif zien voor wanneer de afrekenen link wordt gegenereerd
  tpj(".buttoncheckout").html("<img class='loadingif' src='images/loading.gif'>");
  // Check of de afwijkend adres checkbox is aangeklikt
  if (tpj('input[name="checkbox"]').prop('checked')) {
    $afwijkendpostcode = tpj('input[name="billing_postcodeafw"]').val(),
    $afwijkendhuisnummer = tpj('input[name="billing_housenumberafw"]').val(),
    $afwijkendstraat = tpj('input[name="straatafw"]').val(),
    $afwijkendplaats = tpj('input[name="plaatsafw"]').val();
  }else{
    $afwijkendpostcode = '',
    $afwijkendhuisnummer = '',
    $afwijkendstraat = '',
    $afwijkendplaats = '';
  }

  var url = 'includes/betaal.php',
  $betaalid = tpj('input[name="toppaymentopt"]').attr("id"),
  $bedrag = tpj('input[name="totaalbedrag"]').val(),
  $voornaam = tpj('input[name="billing_first_name"]').val(),
  $achternaam = tpj('input[name="billing_last_name"]').val(),
  $mail = tpj('input[name="billing_email"]').val();

  var posting = tpj.post( url, {
    betaalid: $betaalid,
    bedrag: $bedrag,
    voornaam: $voornaam,
    achternaam: $achternaam,
    mail: $mail,
    afwijkendpostcode: $afwijkendpostcode,
    afwijkendhuisnummer: $afwijkendhuisnummer,
    afwijkendstraat: $afwijkendstraat,
    afwijkendplaats: $afwijkendplaats,
    idealbanken: $idealbanken
  } );
  // Stop het resultaat in een div met de class .adresscript
  posting.done(function( data ) {
    tpj( ".buttoncheckout" ).empty().append( data );
  });
}
});

您可以使用此代码。更改时无需在无线电内部更改选择。将这两个事件分开。创建一个运行AJAX的函数。现在在更改选择值时调用此函数。

当满足其中的条件时重新启动jquery函数

1 个答案: