Каков правильный способ добавления слушателей к новым элементам после использования AJAX для получения html-контента? (JQuery, JavaScript)

Два пути:

1) Привязать к нединамическому родительскому контейнеру, используя .on()

$('.some-parent-class').on('click', '.element', function() {
  // DO STUFF!
});

2) Привязать новые элементы после завершения вызова ajax

$.ajax(url, {
  // ajax options
}).done( function(data) {
  var newEl = $('<div class="element"></div>');
  // Setup your newEl with data here...
  newEl.on('click', function() {
    // do stuff
  });
  newEl.appendTo($('.some-parent-class'));
});

Первое обычно приводит к более быстрому времени отклика ajax, но может также замедлять отклик на нажатие.

Используйте функцию jQuery .on() для обработки делегирования событий. Первый элемент, который вы предоставляете, является статическим элементом (никогда не удаляется/не заменяется). первый аргумент — это событие, которому вы хотите делегировать, наведение мыши/щелчок и т. д. Второй аргумент — это элемент, который мы хотим, чтобы событие срабатывало при возникновении события. Третий аргумент — это функция обратного вызова, которая запускается при возникновении события.

$(document).on('event', 'elementIdentifier', function(){
    //your code
});

$(".parent-div").on("click", ".child-div-class-name" ,function(){
  somefunction();
});

все новые вставленные элементы внутри .parent-div будут иметь слушателей onclick

В дополнение к ответу Популуса, который сам по себе великолепен, логически эквивалентным решением для его второго варианта будет использование Обещания:

     var iGotYou = new Promise(function (res, rej) {
        $.ajax({
             //ajax paramaters
        })
            .done(function( data ) {
                //handle the data as necessary...
                //then resolve the Promise
                res();
            });
    });

    //the Promise has been resolved
    iGotYou.then(function (response) {
        //add the event listener now that the promise has been fulfilled
       document.getElementById('someId').addEventListener('click', function (e) {
        //whatever you want to do on click event
       });
    })

Я не совсем уверен, о чем вы здесь спрашиваете, но вы можете использовать функцию jQuery .on() для привязки к элементам, которые уже существуют в вашем документе, ИЛИ к элементам, которые будут существовать в будущем.

Вот краткий пример:

$(document).ready(function () {
    $(document).on('click', '#new-button', function() {
        alert("You clicked the new button");
    });

    //get some HTML via ajax. Let's assume you're getting <button id="new-button">Click me</button>
    $.get('url', function(res) {
        $('body').append(res);
    });
});