javascript - 为什么 jquery 点击事件在 Firefox 上没有触发？

Question

我在 JS 中有这个函数:

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

在我的 asp.net 页面中，我有这个按钮:

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

按钮动态添加在li标签上，用户可以添加更多按钮。

它不会在 FIREFOX 上触发点击事件，但在 CHROME 上会触发。

观察:我必须在按钮上添加内联 onclick 事件以防止回发问题。

Answer 1

首先，你可以添加“return false;”到您的事件处理程序，它将避免回发 - 您不需要将其内联。

其次，我推荐一个绑定(bind)函数:

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

现在，只需调用:

BindClick();

每次向页面添加控件时都需要此事件处理程序。这应该适用于每个浏览器。