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

您的问题似乎是您正在将事件处理程序绑定到页面上尚不存在的元素。处理这种情况的最简单方法是使用事件委托，它使您可以绑定到绑定事件时页面上 is 的文档之类的父元素：

$(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”）匹配的元素上触发时，该处理程序才会实际触发。

如何将事件绑定到异步加载的内容？

2 个答案: