1

早上好，我对 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>');

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

4

3 回答 3

2

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

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

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

演示小提琴

更多关于委托的信息可以在这里找到。

于 2013-10-12T15:00:16.823 回答
1

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

$(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的需要。

于 2013-10-12T14:58:15.127 回答
0

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

$('button[name="modificaProva"]').live('click', function(){
   ... your code
});
于 2013-10-12T15:32:26.480 回答