0

我对 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 包含（以创建响应） - 当然还有其他内容。但是，在第一段 javascript 更改 tbody 后，添加一行不再起作用。即使来自响应的 tbody 具有与初始请求中相同的数据（当搜索字符串为空时）。

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

亲切的问候，

尼尔斯

4

1 回答 1

1

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

$('body').on('click','.addingredient', function(e){
    $('<tr><td colspan="5">test</td></tr>').insertAfter($(this).closest('tr'));                    
});
于 2014-03-19T16:48:28.800 回答