Почему один клик генерирует несколько событий кликов?

Question

Я добавил button динамически. Но когда я нажимаю на него, он запускает несколько событий click и вызывает связанную функцию с alert('clicked'); несколько раз, а не один раз.

Можете ли вы рассказать мне, почему и как я могу это исправить?

Код

var root = document.getElementById('current_page'); 
var button = document.createElement('input'); 
button.type = 'button'; 
button.title = 'Add new book to list'; 
button.className = 'btn btn-primary'; 
button.id = 'get_new'; 
button.setAttribute('value', 'No Thanks,Get New'); 
button.setAttribute('style', 'position:relative; top:-5px;left:900px'); 
root.appendChild(button); 

Handler

$('body').on('click', '#get_new', function() { 
      alert('clicked'); 
}); 

Answer 1

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

Fiddle: http://jsfiddle.net/f9PX4/

function myFunction() { 
    alert('clicked'); 
} 

$(function() { 
    var button = $("<input>"); 
    button.attr("type", "button") 
     .attr("title", "Add new book to list") 
     .attr("id", "get_new") 
     .css({ position: "relative", top: -5, left: 900 }) 
     .val("No Thanks,Get New") 
     .addClass("btn btn-primary"); 
    button.click(function() { 
     return myFunction(); 
    }); 
    $("#current_page").append(button); 
});