Question

我有一个链接，允许用户将其付款方式设置为默认付款方式（如果它还不是默认付款方式）。如果他们点击它，我也有一个短脚本，监视点击链接的dom更改，如果href或链接文本成为＆＃34;默认＆＃34;的href或文本。付款方式，它会检查页面上的所有其他链接，并确保它们设置为＆＃34;默认＆＃34;并指向正确的网址等（因为其中一个人会说这是默认的付款方式）。

无论如何，我的问题是，如果我通过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

请勿使用$selector.data方法$selector.attr

bootstrap是一个css库，取决于html attributes而不是html5 dataset values

所以而不是

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

使用此

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

Answer 2

您可以通过在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>

当我通过jQuery

2 个答案: