javascript - 当满足内部条件时重新启动 jquery 函数

Question

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

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

我的问题是，当我选中 top paymentopt 单选按钮时，脚本仅触发一次 ajax post。

但是当在显示的下拉列表中单击银行时，我想再次发布。

我怎样才能做到这一点？

这是我的尝试代码(不幸的是，它不起作用):

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 );
  });
}
});

您可以使用此代码。无需在更改时在单选按钮内绑定(bind)选择更改。将这两个事件分开。创建一个函数来运行 AJAX。现在在选择值更改时调用此函数。