Why jquery click event is not firing on firefox?

Question

I have this function in JS :

    jQuery(function ($) {
     $(document).on("click", ".botaoExcluirRecibos", function (e) {
            e.preventDefault();
            alert("Fired!");
        });
     });

And in my asp.net page i have this button:

<div class="listaExcluir" id="listaExcluir">
    <ul id="listaArquivos">
        <li>
            <div class="voceAnexou"></div>
            <div class="divInformacoesAtendimento divInformacoesAtendimentoTabelaRecibo">
                <p>Você anexou:<strong> file1.png </strong></p>
                <button class="botaoVermelhoPequeno botaoExcluirRecibos" onclick="return false;">Excluir</button>
            </div>
        </li>
    </ul>
</div>

The button is added dynamically on the li tag, and more buttons can be added by the user.

It's not firing the click event at FIREFOX , but at CHROME is.

Obs: I had to add the onclick event inline on the button for preventing the postback issue.

Answer 1

First, you can add "return false;" to your event handler and it will avoid postbacks - you don't need to have it inline.

Second, I would recommend a binding function:

function BindClick(){
    $(".botaoExcluirRecibos").unbind("click"); // To prevent double-binding click events!
    $(".botaoExcluirRecibos").on("click", function(e){
        e.preventDefault();
        console.log("Fired!"); //Use the console instead of alerts for debugging purposes!
        return false;
    });
}

Now, just call:

BindClick();

Every time you add a control to the page that will need this event handler. This should work in every browser.