Нажмите событие, не запускающее с помощью ON?

Question

Когда я нажимаю на любую кнопку, событие click не запускается. Жесткий я заставил его работать, используя $("div").on("click", "button", function() {, но я хочу, чтобы он работал, используя .class селектор.

Синтаксис ON:

.На (события [селектор] [данные], обработчик)

HTML:

<div> 
    <button class='alert'>Alert!</button> 
</div> 

код :

$(document).ready(function() { 
    $("div button").on("click", ".alert", function() { 
     console.log("A button with the alert class was clicked!"); 
    }); 
    $("<button class='alert'>Alert!</button>").appendTo("div"); 
}); 

образец для работы here

Это может быть основным, но я серьезно начинаю пробовать & понимать несколько концепций. Помогите мне понять.

Answer 1

Ваш текущий код пытается делегировать событие для элемента с предупреждением класса в кнопке. которые не существуют.

Если вы пытаетесь передать событие для кнопки с классом предупреждения, Вы должны использовать:

$("div").on("click", "button.alert", function() { 
    console.log("A button with the alert class was clicked!"); 
}); 

Working Demo

Answer 2

$(document).ready(function() { 
    $("div").on("click", "button.alert", function() { 
     console.log("A button with the alert class was clicked!"); 
    }); 
    $("<button class='alert'>Alert!</button>").appendTo("div"); 
}); 

Answer 3

Вы также можете попробовать это ...

$(document).ready(function() { 
    $("div button.alert").on("click", function() { 
     console.log("A button with the alert class was clicked!"); 
    }); 

    $("<button class='alert'>Alert!</button>").appendTo("div"); 
}); 

FIDDLE для справки