Event . click() of jQuery, does not work with tag <button> ( with Bootstrap 3 )

Question

I have a website with 2 files (index.php and modals.php). No index.php use include("modals.php"); and in modals.php I have several modals that are generated dynamically, according to the information in DB.

In modals.php I have 2 buttons (one created using the tag <button>Abre</button> and other using the tag <input type"button" value="Abre" />.

My goal is to use the tag <button></button> to give Rigger at the event, because I’m using Bootstrap 3 and I want the button to have no text but a glyphicon.

In index.php I have:

<script type="text/javascript">
$( document ).ready(function() {
    $(".botaoDoModal").click(function () {
        alert("Funciona!");
    });

});
</script>

but this script only works when I add class="botaoDoModal" tag <input>, the same does not happen with the tag <button></button>.

I don’t know why, or if I was wrong and somewhere...

Answer 1

Always prefer to use the event .on() in place of click(). Because you may have dynamically generated elements (for example coming from an AJAX call), you may want to have the same click handler that was previously linked to the same element selector "delegating" the event click using on() as argument for other elements created dynamically.

Here is a very good article from the Tableless website about . on() and . off(): http://tableless.com.br/jquery-conheca-os-metodos-on-e-off/

Answer 2

I don’t know what the mistake was, but I copied another boot I had somewhere in the code and pasted it, added the class and it worked, it must have been a syntax error