Question

早上好，我遇到了jQuery .on（）的问题。我的JavaScript说

$(document).ready(function() {
    $("button[name='modificaProva']").on("click",function(event){
        event.stopPropagation();
        if($('#gestioneProva').is(":visible")){
            $('#gestioneProva').slideToggle();
        }
        else{
            var provaSelected=$("input[name='provaSelected']:checked").val();
            var idProva=parseInt(provaSelected);
            if(isNaN(idProva)){
                alert("L' id della prova selezionato risulta non essere un numero. Prova a riaggiornare la pagina e se l'errore persiste contatta un amministratore");
            }
            else{
                getDettagliProva(idProva);
            }
        }
   });
});

我的HTML说：

<p class="submitProve"><button type="button" name="creaProva">Crea Prova</button></p>

然后我需要动态添加一个名为“modificaProva”的按钮，我使用这段代码：

$(".submitProve").append('<button type="button" name="modificaProva">Mostra/Nascondi Dettagli Prova</button>');

按钮是在其他一些东西之后添加的，它在屏幕上显示的位置正确但是当我点击它时没有任何附加内容。如果我在页面加载所有工作正常时创建按钮。如果元素不存在，方法也必须工作。

Answer 1

由于它是动态创建的元素，因此必须使用如下所示的事件委派：

$(".submitProve").on("click","button[name='modificaProva']", function (event) {
    //rest of your onclick event code.
});

注意：我们从.submitProve委派，因为它是最接近的静态元素。如果它不是静态的，您可以从$(document)委派

Demo Fiddle

可以找到有关授权的更多信息here。

Answer 2

您需要使用事件委托，将事件委托给父级或文档以将事件绑定到动态添加的元素。

$(document).on("click", "button[name='modificaProva']", function(event){
    event.stopPropagation();
    if($('#gestioneProva').is(":visible")){
        $('#gestioneProva').slideToggle();
    }
    else{
    var provaSelected=$("input[name='provaSelected']:checked").val();
    var idProva=parseInt(provaSelected);
    if(isNaN(idProva)){
        alert("L' id della prova selezionato risulta non essere un numero. Prova a riaggiornare la pagina e se l'errore persiste contatta un amministratore");
    }
    else{
    getDettagliProva(idProva);
    }
 }});

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序jQuery api。

Answer 3

对于新创建的按钮，您需要将.on()更改为.live()，如下所示：

$('button[name="modificaProva"]').live('click', function(){
   ... your code
});

.on jquery方法和按钮动态创建

3 个答案: