綁定jQuery的處理程序，這些領域在飛行

Question

創建我使用.before()方法動態添加一些輸入：

$("#mfrmStartPoint").before("<input type='button' class='uk-gb uk-button 
uk-button-small' value='" + $("#mfrmMaterialName").val() + "' />"); 

而且我約束。 click方法對所有具有.uk-gb類的元素，問題是聲明的.click不適用於新創建的元素。

$(".uk-gb").click(function() { 
    if ($(this).hasClass("uk-active-custom")) { 
     $(this).removeClass("uk-active-custom"); 
    } else { 
     $(this).addClass("uk-active-custom"); 
    } 
}); 

Answer 1

使用.on（）方法，它也可以綁定到動態元素。

$("body").on("click",".uk-gb",function() { 
    if ($(this).hasClass("uk-active-custom")) { 
     $(this).removeClass("uk-active-custom"); 
    } else { 
     $(this).addClass("uk-active-custom"); 
    } 
}); 

Answer 2

您可以使用event delegation來動態創建元素。

$("#mfrmStartPoint").on("click",".uk-gb",function() { 
    if ($(this).hasClass("uk-active-custom")) { 
     $(this).removeClass("uk-active-custom"); 
    } else { 
     $(this).addClass("uk-active-custom"); 
    } 
}); 

在這種情況下，事件代表團有助於click事件綁定到新添加的輸入要素

還要注意的是，對於委派事件處理更有效地將它們綁定到，是不是最接近的父動態這是你的情況編號爲#mfrmStartPoint的元素。