Bootstrap事件未以ajax加载的形式捕获

时间:2017-09-07 19:23:45

标签: javascript jquery twitter-bootstrap-3

我试图抓住显示事件的引导程序面板。我相信该面板正在工作,因为更改面板会交换面板上的活动类。但是,事件抓取不起作用。

以下是表格的一部分:

<h4>Discounts</h4>
<ul id="discountTabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#brandDiscounts" data-toggle="tab">Brand</a></li>
    <li role="presentation"><a href="#genericDiscounts" data-toggle="tab">Discount level</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="brandDiscounts">
        <!-- Brand input -->
        <select class="form-control" name="brandID">
            <option value="0">Select a brand</option>

            @foreach($brands as $brand)
                <option value="{{$brand->getId()}}">{{$brand->getName()}}</option>
            @endforeach
        </select>
    </div>

    <div role="tabpanel" class="tab-pane" id="genericDiscounts">
        <!-- Brand input -->
        <select class="form-control" name="genericDiscount" disabled>
            <option value="0">Select a discount</option>

            @foreach(ProductBase::getDiscountLevels() as $discountLabel => $discount)
                <option value="{{$discount}}">{{$discountLabel}}</option>
            @endforeach
        </select>
    </div>
</div>

$(document).ready(function(){
    updateDiscountInputs();

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
        updateDiscountInputs();
    });
});

/**
 * Only the active table input should not be disabled.
 */
function updateDiscountInputs(){
    var brandDiscount   = $('#brandDiscounts').hasClass('active');
    var genericDiscount = !brandDiscount;

    $('#brandDiscounts').find('select').prop('disabled', !brandDiscount)    ;
    $('#genericDiscounts').find('select').prop('disabled', !genericDiscount);
}

首先加载的页面有一个选择框,并以包含上述代码的形式加载选项(通过ajax)。

1 个答案:

答案 0 :(得分:0)

您的标签链接缺少一些重要标记,例如# Convert `date_transaction_id` to date timestamp. df = df.assign(transaction_date=pd.to_datetime(df['date_transaction_id'].str[:10])) # Find first transaction dates by customer. first_transactions = ( df[df['first_flag'] == 'Y'] .groupby(['Customer'], as_index=False)['transaction_date'] .min()) # Merge first transaction date to dataframe. df = df.merge(first_transactions, how='left', on='Customer', suffixes=['', '_first']) # Filter data and select relevant columns. >>> (df[df['transaction_date'] >= df['transaction_date_first']] .sort_values(['Customer', 'transaction_date']) [['Customer', 'transaction_date', 'first_flag', 'dollars']]) Customer transaction_date first_flag dollars 0 ABC 2015-10-11 Y 100 4 ABC 2015-12-12 N -100 2 BCD 2015-01-01 N -300 1 BCD 2015-03-05 N 150 aria-control

role

此外,您必须在将html添加到DOM后添加事件侦听器。因此,您必须在<ul id="discountTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#brandDiscounts" aria-control="brandDiscounts" role="tab" data-toggle="tab">Brand</a></li> <li role="presentation"><a href="#genericDiscounts" aria-control="genericDiscounts" role="tab" data-toggle="tab">Discount level</a></li> </ul> 回调函数中添加事件侦听器。

例如:

$(element).load()