jQueryを使用して属性を変更すると、ブートストラップデータトグルイベントが中断されます

Question

デフォルトの支払い方法でない場合、ユーザーが支払い方法をデフォルトの支払い方法として設定できるリンクがあります。彼らがクリックすると、クリックされたリンクのDOM変更を監視する短いスクリプトがあり、hrefまたはリンクテキストがhrefまたは "default"支払いメソッドのテキストになると、他のすべてのリンクがチェックされますページの「Make Default」と設定され、正しいURLなどを指すように設定されていることを確認します（そのうちの1つがデフォルトの支払い方法であると言えるでしょう）。

私の問題は、jQueryを使ってリンクを更新すると、アンカータグが正しい限りHTMLになりますが、クリックするとデータトグルがもう発生しなくなります。

ここに初期リンク設定があります。最初にクリックするとデータトグルが機能するため、トグル情報が変更され、デフォルトになります。次に、このような別のリンクがクリックされ、これが私のjQuery経由でこの状態に戻ります。その時点では、もはやトグルしません。私はイベントをフォローすることなくトグルをトリガーする方法を見つけようとしましたが、イベントを停止するとトグルが止まります。私が一時的にhrefを変更したら、jQueryを使って変更して、私がすでにやっていることをやっています。

<a class="default-billing default-billing-bank fws-ajax" 
    id="<?php echo $method->bank_id; ?>" 
    href="/account/billing_bank_default/<?php echo $method->bank_id; ?>" 
    data-toggle-href="javascript:void(0)" 
    data-toggle-html="Default">Make Default</a> 

ここでは、別のリンクをクリックしてデフォルトにしたときにデフォルトのリンクをリセットするために使用しているjQueryを示します。どうやら

を解決しました

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('.default-billing').on('click', function() { 
      var _this = jQuery(this); 

      jQuery('.default-billing').one('DOMSubtreeModified', function() { 
       //alert('Changed: ' + $("<div />").append(jQuery(this).clone()).html()); 
       if (jQuery(this).text() == 'Default' || jQuery(this).prop('href') == 'javascript:void(0)') { 
        //alert('Default'); 
        _this.removeClass('default-billing'); 
        setTimeout(updateDefaultBillingLinks(), 300); 

        _this.addClass('default-billing'); 
       } 
      }); 
     }); 
    }); 

    function updateDefaultBillingLinks() { 
     jQuery('.default-billing').each(function() { 
      if (jQuery(this).text() == 'Default') { 
       /* I am not using this part, but tried it to see if I could just toggle it manually. I couldn't. 
       jQuery(this).toggle(); 
       */ 

       jQuery(this).text('Make Default'); 
       jQuery(this).data('toggle-href', 'javascript:void(0)'); 
       jQuery(this).data('toggle-html', 'Default'); 

       if (jQuery(this).hasClass('.default-billing-card')) { 
        jQuery(this).prop('href', '/account/billing_card_default/' + jQuery(this).prop('id')); 
       } 

       if (jQuery(this).hasClass('.default-billing-bank')) { 
        jQuery(this).prop('href', '/account/billing_bank_default/' + jQuery(this).prop('id')); 
       } 
      } 
     }); 
    } 
</script> 

UPDATEは/、私は.data('toggle-[attribute]')を使用する必要がありましたが、私の他の問題は、私は.hasClass()をチェックしていたとき、私はクラス名の前に.を入れていたということでした。私はそれを取り除かなければならなかった。

決勝のjQuery：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('.default-billing').on('click', function() { 
      var _this = jQuery(this); 

      jQuery('.default-billing').one('DOMSubtreeModified', function() { 
       if (jQuery(this).text() == 'Default' || jQuery(this).prop('href') == 'javascript:void(0)') { 
        _this.removeClass('default-billing'); 

        jQuery('.default-billing').each(function() { 
         if (jQuery(this).text() == 'Default') { 
          jQuery(this).text('Make Default'); 
          jQuery(this).data('toggle-href', 'javascript:void(0)'); 
          jQuery(this).data('toggle-html', 'Default'); 

          if (jQuery(this).hasClass('default-billing-card')) { 
           jQuery(this).prop('href', '/account/billing_card_default/' + jQuery(this).prop('id')); 
          } 

          if (jQuery(this).hasClass('default-billing-bank')) { 
           jQuery(this).prop('href', '/account/billing_bank_default/' + jQuery(this).prop('id')); 
          } 
         } 
        }); 

        _this.addClass('default-billing'); 
       } 
      }); 
     }); 
    }); 
</script> 

Answer 1

は、CSSのライブラリであること$selector.attr

ブートストラップがhtml attributesないhtml5 dataset values

ので、代わりの

jQuery(this).data('toggle-href', 'javascript:void(0)'); 
jQuery(this).data('toggle-html', 'Default'); 

使用に依存$selector.dataメソッドの使用を使用してはいけませんこの

jQuery(this).attr('data-toggle-href', 'javascript:void(0)'); 
jQuery(this).attr('data-toggle-html', 'Default'); 

Answer 2

DOMを監視して、アップデートが成功したかどうかを確認する必要はなく、javascriptで自分で更新プログラムを呼び出すことができます。例：タイムアウトやDOMイベントフックを使用せずにすべてを設定しないのはなぜ

$('.default-billing').on('click', function(e) { 
 
    var _this = jQuery(this); 
 
    e.preventDefault(); 
 
    
 
    if (_this.hasClass('is-default')) 
 
    return; 
 
    if (_this.closest('table').find('.updating').length > 0) 
 
    return; 
 
    
 
    _this.addClass('updating'); 
 
    
 
    //$.ajax(this.href) 
 
    // fake Ajax call for test 
 
    __fakeAjax(this.href) 
 
    .then(function(resp) { setDefaultUI(_this); }) 
 
    .always(function(){ _this.removeClass('updating') }); 
 
    
 
}); 
 

 
function setDefaultUI($el){ 
 
    $el 
 
    .text('Default') 
 
    .addClass('is-default') 
 
    .closest('table') 
 
     .find('.is-default') 
 
     .not($el) 
 
     .text('Make Default') 
 
     .removeClass('is-default') 
 
} 
 
function __fakeAjax(href) { 
 
    console.log(`faking call to ${href}`); 
 
    var d = $.Deferred(); 
 
    setTimeout(d.resolve, 1000); 
 
    return d.promise(); 
 
};

.is-default {  font-weight:bold; } 
 
.updating::after { content: '...'; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <caption>Banks 
 
    <tr> 
 
    <td>Bank 1 
 
    <td><a class="default-billing default-billing-bank fws-ajax is-default" href="/account/billing_bank_default/1">Default</a> 
 
    <tr> 
 
    <td>Bank 2 
 
    <td><a class="default-billing default-billing-bank fws-ajax" href="/account/billing_bank_default/2">Make Default</a> 
 
    <tr> 
 
    <td>Bank 3 
 
    <td><a class="default-billing default-billing-bank fws-ajax" href="/account/billing_bank_default/3">Make Default</a> 
 
    <tr> 
 
    <td>Bank 4 
 
    <td><a class="default-billing default-billing-bank fws-ajax" href="/account/billing_bank_default/4">Make Default</a> 
 
</table> 
 

 

 
<table> 
 
    <caption>Cards 
 
    <tr> 
 
    <td>Card 1 
 
    <td><a class="default-billing default-billing-card fws-ajax is-default" href="/account/billing_card_default/1">Default</a> 
 
    <tr> 
 
    <td>Card 2 
 
    <td><a class="default-billing default-billing-card fws-ajax" href="/account/billing_card_default/2">Make Default</a> 
 
</table>