jQuery .on（）方法失敗，引導程序

我有兩個單選按鈕，在將引導程序包含到我的頁面之前工作得很好。我不知道爲什麼bootstrap會干擾一個簡單的.on（）jQuery方法......它讓我瘋狂，因爲我嘗試了像onClick這樣的其他方法，但它也無法工作。jQuery .on（）方法失敗，引導程序

自舉庫我已經包括：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jQuery的用於測試的是包括引導工作過：

$(document).ready(function(){ 
    $('#button2').on('click', function() { 
     alert('it works!'); 
    }); 

    $('#button1').on('click', function() { 
     alert('it works!'); 
    }); 
});

測試HTML：

<div class='btn-group oneLine' data-toggle='buttons'> 
    <label class='btn btn-primary'> 
     <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a> 
    </label> 

    <label class='btn btn-primary'> 
     <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a> 
    </label> 
</div>

我添加下面帶電測試代碼（不包括自舉）：

$(document).ready(function(){ 
 
    $('#button2').on('click', function() { 
 
    alert('it works!'); 
 
    }); 
 

 
    $('#button1').on('click', function() { 
 
    alert('it works!'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='btn-group oneLine' data-toggle='buttons'> 
 
    <label class='btn btn-primary'> 
 
    <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a> 
 
    </label> 
 

 
    <label class='btn btn-primary'> 
 
    <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a> 
 
    </label> 
 
</div>

來源

2017-02-09 theflarenet

我不知道爲什麼會舉一個簡單的。對（）jQuery的方法干擾......

這是因爲「自舉」增加了下面兩種風格的每個無線輸入元素：

clip: rect(0,0,0,0)：剪輯CSS屬性定義了一個元件的一部分是可見的。

pointer-events: none：CSS屬性指針事件允許作者控制在什麼情況下（如果有的話）特定的圖形元素可以成爲鼠標事件的目標。

現在，你有兩種策略：去除這兩種風格或考慮另一種方法。

您的單選按鈕包含在標籤內。每個點擊事件都是從標籤或錨點捕獲的，沒有任何東西傳遞給單選按鈕。

這意味着該事件處理程序必須連接到標籤：

$('#button2').closest('.btn')

您可以使用Attribute Starts With Selector和querySelector減少代碼的行數。

另一種方法是直接使用標籤。

的片段：

$(document).ready(function(){ 
 
    $('[id^="button"]').closest('.btn').on('click', function() { 
 
    console.log(this.querySelector('input').id + ': it works!'); 
 
    }); 
 

 
    $('div.btn-group.oneLine label.btn').on('click', function() { 
 
    console.log('An alternative way is to use the label: ' + this.querySelector('input').id + ': it works!'); 
 
    }); 
 

 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class='btn-group oneLine' data-toggle='buttons'> 
 
    <label class='btn btn-primary'> 
 
     <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a> 
 
    </label> 
 

 
    <label class='btn btn-primary'> 
 
     <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a> 
 
    </label> 
 
</div>

來源

2017-02-09 17:38:01 gaetanoM

哇！神奇的答案。非常感謝你！ – theflarenet

@theflarenet答案更新：我希望現在很清楚原因。 – gaetanoM

檢查，你應該包括引導JS jQuery的一前一後。見示例here。同時檢查jquery版本的兼容性，在你使用2.2.1的例子中，但在bootstrap 1.12中。

來源

2017-02-09 17:28:02 zhukva

jQuery .on（）方法失敗，引導程序

回答

相關問題