Jquery on Click Function Not Working With Bootstrap

jquery on click function not working with bootstrap

You need to use event delegation and change the following

  $('.remove-coordinate-component').click(function(){

to

$("#coordinate-container").on('click','.remove-coordinate-component',function() {

here is thedemo

Bootstrap and jQuery click event not working

The reason that this doesn't work is that Bootstrap hides the input elements. You are actually clicking the label in a button set, not the actual elements.

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

Another aspect of Bootstrap button groups is that you end up losing the radio button. Here is some markup that adds a checkmark glyphicon.

<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ásicas
  </label>
  <label class="btn btn-outline-primary">
    <span class="glyphicon"></span>
    <input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"> É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>

See this fiddle https://jsfiddle.net/sdodvc3s/4/

EDIT: You'll notice in this code an unusual construct for handling the radio button clicks. The code for this is designed to handle radio click events in a somewhat agnostic way. It could be abstracted into a jQuery plugin like so:

$.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);
        }
    });
});

And then used to handle any radio buttons on your page regardless of it's styling. Using the plugin, your code would become:

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

onClick with Bootstrap is not working

Place click event handler in the footer because you are loading jquery after loading DOM

in footer

like

<footer th:fragment="footer">
    <script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-select/1.12.2/js/bootstrap-select.min.js}"></script>
    <script>$('.btn-info').click(function(e) {
            e.preventDefault();
            $(this).addClass('active');
        })</script>

    //rest of the code
</footer>

jquery on click function work only on double click

What you want to achieve is not really clear and the code you provided is not working.

I think the issue is in the fadeIn function, you attach an event listener at each iteration. Also, at the first click the callback won't be executed, and this seems the
issue you described.

To fix it, you should change the function to:

function fadeIn() {
  $("#myModal").fadeIn(600);
}

Also, consider about event binding from JS, avoid onclick and similar structures and prefer this:

$(document).ready(function() {
  $("#tasto1").click(function() {
    openModal();
    currentSlide(1);
    fadeIn();
  });
});

jQuery .on('click', function()) not working with bootstrap-datetimepicker

I used the following code and it's working for multiple clicks:

$(document).ready(function() {
    $('#datetimepicker').datetimepicker({
        inline: true,
        format: 'DD/MM/YYYY'
    });

    $('div tbody').on('click', 'tr > .day',function(){
        alert($(this).data().day)
    })
});

jsfiddle

To access the data stored in data attribute in the html elements, you can search and read more about it on jQuery .data()

Button event does not work inside Bootstrap modal

If dynamically generated element then you try below type of click method.

$(document).on("click", "#email-signup", function(event){
  alert('Hello World');
});

---

Related Topics