javascript - jquery，在ajax成功函数中操作数据

Question

在qwerty.php中，我可以使用ajax加载test.php，我还想操作成功函数中加载的数据，但它似乎不起作用。

在 qwerty.php 中我的代码是

<div class="qwerty">qwerty</div>

<script src="jquery.js"></script>
<script>

$(function(){

$.ajax({
    type: 'GET', 
    url: 'test.php', 
    success: function(data, textStatus, jqXHR) {
        $(data).find('.test1').click(function(){$(this).toggle();});
        $('.qwerty').before(data);

    }
});


});
</script>

在 test.php 中我有:

<div class="test1">test1</div>
<div class="test2">test2</div>

所以我的数据在div“qwerty”之前正确加载，但是当我单击“test1”时没有任何反应。

Answer 1

它不起作用，因为您将 onclick 附加到 $(data) 但将 data 插入到 DOM 中。试试这个:

success: function(data, textStatus, jqXHR) {
    var el = $(data);
    el.find('.test1').addBack().filter('.test1').click(function(){$(this).toggle();});
    $('.qwerty').before(el);
}

我使用 find(...).addBack().filter(...) 来查找与您的选择器匹配的所有元素。find() 将仅查找具有类 test one 的 test1 和 test 1 的子元素。 filter() 只会过滤所有根元素，因此如果您有子元素，它不会在其中搜索。因此构造 find(...).addBack().filter(...)