Запуск функции в динамически добавленном классе

Question

У меня есть кнопка, которая при нажатии вставляет поле ввода формы и кнопку (для удаления) в форму с помощью JQuery .after(). Это прекрасно работает.

Кнопка, которая вставлена, имеет функцию .click, которая должна запускаться при нажатии - она ​​не работает.

<script type="text/javascript"> 

    $("#addAQuestion").click(function(){ 

     var begin = "<tr>"; 
     var question = "<td><input type='text' name='question'/>"; 
     var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>"; 
     var end = "</tr>"; 

     $("#questions").after(begin + question + deleteButton + end); 

    }); 

    $(".deleteQuestion").click(function(){ 

     alert('test'); 
     //$(this).parent().empty(); 

    }); 

</script> 

Какое предупреждение не срабатывает, когда пользователь нажимает кнопку .deleteQuestion?

Спасибо!

Answer 1

Порядок исполнения. Код, который добавляет узлы в DOM, асинхронен - ​​это происходит при нажатии. Поэтому, по сути, вы добавляете события click к .deleteQuestion узлам до того, как эти элементы находятся в DOM.

Есть два способа исправить это.

1) Закрепить порядок выполнения, так что клики будет правильно подключен

<script type="text/javascript"> 

    $("#addAQuestion").click(function(){ 

     var begin = "<tr>"; 
     var question = "<td><input type='text' name='question'/>"; 
     var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>"; 
     var end = "</tr>"; 

     $("#questions").after(begin + question + deleteButton + end); 

     // Has to be here, right after they're added to the DOM 
     $(".deleteQuestion").click(function(){ 

      alert('test'); 
      //$(this).parent().empty(); 

     }); 
    }); 

</script> 

2) Или, вы можете использовать live() функции JQuery, чтобы справиться с этим для вас посредством делегирования событий

<script type="text/javascript"> 

    $("#addAQuestion").click(function(){ 

     var begin = "<tr>"; 
     var question = "<td><input type='text' name='question'/>"; 
     var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>"; 
     var end = "</tr>"; 

     $("#questions").after(begin + question + deleteButton + end); 

    }); 

    $(".deleteQuestion").live('click', function(){ 

     alert('test'); 
     //$(this).parent().empty(); 

    }); 

</script> 

Answer 2

Поскольку кнопка удаления не существует, когда вы делаете свою проводку событий.

Рассмотрим глядя в .live (API) в JQuery, чтобы решить эту проблему, или же поставить проводку на кнопку Удалить щелчком внутри другого обработчика щелчка (так что провода после добавлена ​​кнопка)

Кроме того, вы должны действительно рассмотреть возможность использования apis в dom манипуляции вместо конкатенации строк.

Answer 3

Вы не назначая событие объекта йота, когда вы добавляете его, изменить код следующим образом:

<script type="text/javascript"> 

    $("#addAQuestion").click(function(){ 

     var begin = "<tr>"; 
     var question = "<td><input type='text' name='question'/>"; 
     var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>"; 
     var end = "</tr>"; 

     $("#questions").after(begin + question + deleteButton + end); 

     $(".deleteQuestion").click(function(){ 

      alert('test'); 
      //$(this).parent().empty(); 

     }); 
    }); 

</script> 

Answer 4

Это должно работать:

<script type="text/javascript"> 

    $("#addAQuestion").click(function(){ 

     var begin = "<tr>"; 
     var question = "<td><input type='text' name='question'/>"; 
     var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>"; 
     var end = "</tr>"; 

     $("#questions").after(begin + question + deleteButton + end); 

     $(".deleteQuestion").click(function(){ 
      alert('test'); 
      //$(this).parent().empty(); 
     }); 
    });  
</script>