Question

我是jQuery的新手，只是创建了以下内容：上面有一个文本字段的表，该表显示了数据库中的匹配项：

<script>
$('#searchRecept > #searchReceptAjax').keyup(function(){//Werkt dit?

    var postRecept = $.post("../ajaxhandler.php?action=searchRecept", $('#searchRecept').serialize());
    postRecept.done(function( data ) {
        var response = $("<div>" + data + "</div>").find('tbody');
        $('#recepten > tbody').replaceWith( response );
    });
});
</script>

这完全没问题。在此之前，我创建了一个链接（tbody的每一行中的一个）以在该行之后插入一个新行：

<script>
    $('.addingredient').click(function(e){
    $('<tr><td colspan="5">test</td></tr>').insertAfter($(this).closest('tr'));                    
    });
</script>

tbody看起来像这样：

<tbody>
    <tr>
        <td>Something...</td>
        <td>Something else.</td>
        <td>Probably some text here.</td>
        <td>...</td>
        <td>???</td>
        <td><a href="#" class="addingredient">aap</a></td>
    </tr>
</tbody>

我在初始页面请求中使用与ajaxhandler.php相同的php include（创建响应） - 当然还有其他内容。但是，在tbody被第一段javascript更改后添加一行不再起作用。即使来自响应的tbody具有与初始请求中相同的数据（当搜索字符串为空时）。

为什么这不起作用？有什么想法吗？

种类问候，

尼尔斯

Answer 1

您可以使用 event delegation 为动态创建的元素附加事件：

$('body').on('click','.addingredient', function(e){
    $('<tr><td colspan="5">test</td></tr>').insertAfter($(this).closest('tr'));                    
});

tr在ajax请求后插入

1 个答案: