Как привязать событие к контенту, загруженному асинхронно?

Question

Это мой html:

<div class="mydiv" data-cid="1">
    <div class="mydiv2">
        <p>
            <b>Call this text...</b> 
        </p>
    </div>
</div>

Я связываю этот обработчик событий:

$(".mydiv").on('longtap',function(e,data)
{
    cid = this.getAttribute('data-cid');
    message = $(this).html(); // I want only B-Tag like this.b...
    if(this.getAttribute('data-cid')) doit(......); 
});

Моя проблема в том, что, если я загружаю позже с AJAX, метод long-click делаетбольше не работает

Мой AJAX:

$.ajax({
    url: 'ajax.php?file=chat&readline=1', 
    success: function(data)
    {
        $("#content").append(data);
    }
});

Answer 1

Предполагая, что mydiv2 это внутри .mydiv, вы можете решить обе проблемы следующим образом:

$(document).on('longtap', '.mydiv', function(e, data) {
    cid = this.getAttribute('data-cid');
    message = $(this).html('<b>' + $(this).find('b').html() + '</b>');
    if (this.getAttribute('data-cid')) doit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv" data-cid="1">
    <div class="mydiv2">
        <p>
            <b>Call this text...</b> 
        </p>
    </div>
</div>

Это связывает событие longtap с документом, так что вы можете загрузить больше контента через Ajax, и событие все равно будет запускаться правильно.

Кроме того, это находит <b>, чтобы показать именно это, как вы ожидали.

Answer 2

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

$(document).on('longtap', '.mydiv', function(e, data)
{
    cid = this.getAttribute('data-cid');
    message = $(this).html(); // I want only B-Tag like this.b...
    if(this.getAttribute('data-cid')) doit(......); 
});

Это работает, потому что обработчик событий привязан к документу, который, конечно, всегда присутствует, но обработчик фактически будет срабатывать только в том случае, если событие срабатывает на элементе, который соответствует селектору делегирования (в данном случае «.mydiv»).