Присоединение элемента с обработчиком события к набору элементов

Question

Рассмотрим код javascript / jQuery:

  jQuery("<input/>").attr("type", "button").attr("value", "Click me")
     .click(function()
     {
        alert("hello");
     })
     .appendTo(".someDiv");

Это создает кнопку, привязывает к ней обработчик событий и добавляет ее ко всем элементам с классом "someDiv".

Это работает, как и ожидалось, ТОЛЬКО если в документе есть ТОЛЬКО ОДИН элемент с классом "someDiv". Если их больше, кнопки отображаются, но событие щелчка не срабатывает.

Я знаю, что могу использовать следующий обходной путь:

  jQuery(".someDiv").each(function()
  {
     jQuery("<input/>").attr("type", "button").attr("value", "Click me")
        .click(function()
        {
           alert("hello");
        })
        .appendTo(this);
  });

Что работает, но, возможно, менее изящно.

Я думаю, это как-то связано с тем, что в первом примере создан только один элемент, и этот же элемент добавлен ко всем «someDiv», тогда как во втором примере фактически создано несколько элементов, но я не не понимаю, почему это означало бы, что обработчик событий не работает в первом примере.

Answer 1

Это довольно странный способ сделать это. Я бы связал это с live .

$("input[type=button]").click(function() {
  alert("hello");
});

Также не уверен, что несколько вызовов attr делают для вас:

(".someDiv").append("<input type='button' value='Click me' />");

Answer 2

Я думаю, что вы ищете клон (правда). Он создаст копию элемента DOM и его обработчиков событий.

 jQuery("<input/>").attr("type", "button").attr("value", "Click me")
 .click(function()
 {
    alert("hello");
 })
 .clone(true)
 .appendTo(".someDiv");

Answer 3

Вы пробовали что-то вроде этого:

  jQuery("<input/>").attr("type", "button").attr("value", "Click me")
                                           .appendTo(".someDiv");
     jQuery('.someDiv input[type=button]').click(function()
     {
        alert("hello");
     });