Действие не работает при добавлении кнопки с помощью ajax

#jquery #ajax

#jquery #ajax

Вопрос:

Я добавил кнопку в html с помощью ajax, и у нее есть onclick событие.

 if(response.status == "SUCCESS"){
    steps = "";
    for(i = 0 ; i < response.result.length ; i  ){
      steps  ="<br>
      <div >
        <input type='button' value='ok'   id='button'   onclick='action()' class='button'>
      </div>";
     }
     $('#info').html(steps);
}
 

когда я нажимаю на кнопку, действие кнопки не повышается. почему?

Ответ №1:

Попробуйте:

 $('#info').html(steps).find('.button').on("click", action);
 

и удалите onclick атрибут из HTML-кода кнопки.

Кажется вероятным, что, поскольку вы добавляете эти элементы после загрузки страницы, их onclick атрибуты не добавляют обработчики событий к элементам.

Кроме того, у вас есть цикл, дающий каждому элементу один и тот же идентификатор, но идентификаторы должны быть уникальными.

Ответ №2:

Пожалуйста, измените свой код на этот — старайтесь не дублировать IDs , они должны быть уникальными и избегать встроенных JS:

 if(response.status == "SUCCESS") {
    steps = "";
    for(i = 0 ; i < response.result.length ; i  ){
        steps  ="<br><div ><input type='button' value='ok' class='button'></div>";
    }
    $('#info').html(steps);
}
 

А затем используйте это отдельно, а не в каком-либо цикле.

 $(function() {
    $('#info').on('click', 'input.button', action);
});