Bootstrap和jQuery單擊事件不起作用

我有一個div元素與幾個inputs。當我開始編寫代碼時，我只有jQuery，並且輸入的click事件正常運行。
然後，我添加了Bootstrap，事件剛停止工作。
這是代碼Bootstrap和jQuery單擊事件不起作用

<!DOCTYPE html> 
<html> 
<head> 
<title>Qué Pido?</title> 
</head> 
<body> 

<p id="que-pido"></p> 

<!-- jQuery and Bootstrap --> 
<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    getFromEndpoint("clasicas");  
    }); 

    function getFromEndpoint(endpoint) { 
    $(document).ready(function() { 
     $.get("que" + "/" + endpoint, function(data) { 
     console.log(data); 
     $("#que-pido").html(data); 
     }); 
    }); 
    } 

    $(document).ready(function() { 
    $(".categorias").click(function() { 
     console.log("clicked: " + $(this)); 
     var endpoint = $(this).attr('id'); 
     getFromEndpoint(endpoint); 
    }); 
    }); 
</script> 

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-outline-primary active"> 
    <input type="radio" name="categorias" class="categorias" id="clasicas" autocomplete="off" checked> Cl&aacute;sicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"> &Eacute;tnicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <input type="radio" name="categorias" class="categorias" id="todas" autocomplete="off"> Todas 
    </label> 
</div> 

</body> 
</html>

如果我刪除了labels，那麼click方法正確解僱...但當然，我得到的是沒有提供自舉的CSS。
我也嘗試刪除Bootstrap的JS，但後來我失去了按下每個按鈕時發生的動畫，如果可能的話我想保留。

對此的任何想法？
在此先感謝

來源

2016-12-14 jmm

dev控制檯中的任何錯誤？ – j08691

@ j08691沒有錯誤。 'console.log（data）;'這行甚至沒有記錄 – jmm

@ Alexandru-Ionut Mihai對不起，我不明白你的意思是什麼插件 – jmm

這不起作用的原因是Bootstrap隱藏輸入元素。你實際上是點擊按鈕集中的標籤，而不是實際的元素。

var categoriasClicked = function() { 
    console.log("clicked: " + $(this)); 
    var endpoint = $(this).attr('id'); 
    getFromEndpoint(endpoint); 
} 
$('.categorias').each(function() { 
    if ($(this).closest('label').length > 0) { 
     $(this).closest('label').click(function() { 
      $(':radio', this).attr('checked', 'checked').each(categoriasClicked); 
     }); 
    } else { 
     $(this).click(categoriasClicked); 
    } 
}).filter(':checked').each(categoriasClicked);

引導按鈕組的另一個方面是最終失去單選按鈕。這裏有一些標記添加了複選標記圖形。

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-outline-primary active"> 
    <span class="glyphicon"></span> 
    <input type="radio" name="categorias" class="categorias" id="clasicas" autocomplete="off" checked> Cl&aacute;sicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <span class="glyphicon"></span> 
    <input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"> &Eacute;tnicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <span class="glyphicon"></span> 
    <input type="radio" name="categorias" class="categorias" id="todas" autocomplete="off"> Todas 
    </label> 
</div> 

<script type="text/javascript"> 
    var setIcons = function() { 
     $('.glyphicon', this).addClass('glyphicon-unchecked').removeClass('glyphicon-check'); 
     $('.active .glyphicon', this).removeClass('glyphicon-unchecked').addClass('glyphicon-check'); 
    } 
    $(document).on("click", '.btn-group', setIcons); 
    $('.btn-group').each(setIcons); 
</script>

看到這個小提琴https://jsfiddle.net/sdodvc3s/4/

編輯：您將在此通知代碼處理的單選按鈕，點擊一個不同尋常的結構。此代碼旨在以某種不可知的方式處理無線點擊事件。它可以被抽象成一個jQuery插件，像這樣：

$.fn.radioClick(function(callback) { 
    return this.each(function() { 
     if ($(this).closest('label').length > 0) { 
      $(this).closest('label').click(function() { 
       $(':radio', this).attr('checked', 'checked').each(callback); 
      }); 
     } else { 
      $(this).click(callback); 
     } 
    }); 
});

，然後用於處理網頁上的任何單選按鈕，無論它的造型。使用插件，您的代碼將變爲：

$('.categorias').radioClick(function() { 
    console.log("clicked: " + $(this)); 
    var endpoint = $(this).attr('id'); 
    getFromEndpoint(endpoint); 
}

來源

2016-12-14 23:50:05 B2K

非常感謝您的非常詳細的答案。儘管它看起來沒有像現在這樣工作，但是你的**「你實際上點擊了一個按鈕集中的標籤，而不是實際的元素」**評論讓我想到了將categorias類設置爲標籤，使它工作 – jmm

這個小提琴的作品。 – B2K

對不起，我沒有說清楚：我只粘貼了上半部分（不是全部小提琴），然後將這個類添加到標籤中。謝謝 – jmm

Bootstrap和jQuery單擊事件不起作用

回答

相關問題