Бутстрап и событие jQuery click не работают

У меня есть элемент div с паролем inputs. Когда я начал кодировать это, у меня был только jQuery, и мое событие click для входов работало правильно.
Затем я добавил Bootstrap, и событие просто перестало работать.
Это кодБутстрап и событие jQuery click не работают

<!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 Bootstrap, но затем я теряю анимацию, которая происходит при нажатии каждой кнопки, и я хотел бы сохранить это, если это возможно.

Любые идеи по этому вопросу?
Заранее спасибо

источник

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);

Другой аспект групп кнопок Bootstrap заключается в том, что вы теряете радио-кнопку. Вот некоторая разметка, которая добавляет гальванический флажок.

<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/

EDIT: Вы увидите в этом коде необычную конструкцию для обработки нажатий кнопок радио. Код для этого предназначен для того, чтобы обрабатывать события радио-щелчка несколько агностическим способом. Это может быть отведенной в плагин 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

Большое спасибо за ваш очень подробный ответ. Хотя это, похоже, не работает так, как есть, ваш ** «На самом деле вы нажимаете на метку в наборе кнопок, а не на фактических элементах» **, что заставило меня подумать о том, чтобы установить класс 'categoryategias' также на метки, которые сделал работу – jmm

Эта скрипка работает. – B2K

Извините, я не прояснился: я просто вложил верхнюю часть (а не всю скрипку), а затем добавил класс к ярлыкам. благодаря – jmm

Бутстрап и событие jQuery click не работают

ответ

Смежные вопросы