Нажмите обработчик события для динамически сгенерированного ввода / кнопки?

Question

Могу ли я использовать один и тот же код для обработки кликов для статических и сгенерированных Ajax кнопок?Причина, по которой я спрашиваю, состоит в том, что я не могу заставить обработчик щелчка работать для кнопки Ajax, но если я пишу эквивалентный статический HTML, щелчок работает.

Этот код является статической версией, которая делаетработа:

// in JS file:
$(function(){
   $('input.sButton').click(function(){
      var f = $.farbtastic('#picker');
      f.linkTo(this);
      return false;
   });
});

В «статическом HTML»:

<div id = "inputArea">
<label style="white-space: nowrap; line-height: 14px; height: 14px; vertical-align: bottom;">
<input id="sButton1" class="sButton" type="button" style="background-color: rgb(113, 16, 232);">
fubar1
</label>
</div>

Обычный «динамический HTML» выглядит следующим образом:

<div id = "inputArea">
</div>

Загружается код Ajaxкнопки в «inputArea».Я извлек статическую версию этого кода из Firebug.Я запустил подпрограмму Ajax, затем получил представление HTML в Firebug, которое включало выходные данные сервера, и вырезал и вставил его точно в мой статический тестовый код, который воспроизводится выше.Другими словами, я знаю, что статический и динамический HTML эквивалентны.

Но - статический код работает, а динамический - нет.Firebug показывает, что обработчик щелчков JS вводится для статической версии, и всплывающее окно выбора цвета farbtastic появляется, но в динамическом коде этого не происходит.Есть идеи?

Answer 1

Если вы используете jquery 1.7+, используйте на вместо нажатия

http://api.jquery.com/on/

$("body").on("click","input.sButton",function(){
 //do whatever you want
});

если вы используете более низкую версию jquery, используйте live

$('input.sButton').live("click",function(){
 //do whatever you want
});

Answer 2

$('input.sButton').live('click', function(){
      var f = $.farbtastic('#picker');
      f.linkTo(this);
      return false;
   });

.live слушает даже контент ajax.Это должно сделать трюк.Кроме того, вы можете посмотреть jquery .on ().Убедитесь, что вы используете последнюю версию jquery.

Answer 3

для этой цели есть функция jQuery live, посмотрите ее здесь