Question

我们在“garagecar / view / index.ctp”视图页面中有一个部件列表。首次加载页面时，部件列表将填充PHP。每个部分都有一个删除按钮。当用户单击“删除”时，控制器链接将删除该部件，而JQuery / Ajax将删除显示索引中该部件的HTML：

$html->link(__('remove', true),
            array('controller'=>'garage_parts',
                  'action'=>'delete',
                  $gpart['GaragePart']['id']),
            array('class'=>'js-ajax remove_part'));
$(".remove_part").click(function(){
    var answer = confirm("Remove this part?");
    if (answer){
        var partdiv = $(this).parent().parent();
        $.ajax({
            type: "post",
            url: this.href,
        });
        $(partdiv).remove();
    }
    return false;
});

当用户想要动态添加新部件时，我们使用JQuery $（）。load函数来加载“garagepart / view / addpart.ctp”。在addpart.ctp中，有一个$（）。ajax函数，它通过JSON添加部件，并将新部件的HTML附加到index.ctp中的部件列表中。

但是，如果单击此新部件上的“删除”按钮，则上述JQuery函数不会进行评估。该函数无法删除HTML，即使它的结构与预装PHP的部分完全相同。 Cakephp删除链接仍然有效，因此如果您重新加载页面，该部分就会消失。

为什么JQuery不能动态删除动态添加的部分？ remove仅适用于预先加载PHP的部分，而不适用于通过JQuery / Ajax添加的新部分。如果您需要我发布更多代码，请告诉我...谢谢！

Answer 1

您的问题可以使用jQuery中的live（）函数来解决，它基本上像click（）一样工作但是“监听”标记中的更改并应用于在ajax调用所需函数之前添加的新元素。

http://docs.jquery.com/Events/live

Answer 2

我通常做的事情：

创建一个将事件绑定到元素（bind_remove()）
在创建新内容调用bind_remove()的ajax调用之后，该调用应该使新元素有效（即在回调中）。
在jQuery(document).ready(function() {});中添加bind_remove（）函数，该函数应该从开始工作中加载元素。

这是我的bind_remove（）对于页面的样子：

function bind_remove() {
/* bind remove function */
    $('img[class="examremover"]').bind('click', function () {
        var id = $(this).attr('rel');
        $('#exrow'+id).remove();
        var examenes = $('#ReferenciaExamenes').val();
        examenes = examenes.replace(id, '');
        $('#ReferenciaExamenes').val(examenes);

        $('#referencia'+id).remove();
        return false;
    });

}

我为添加和删除（分离的函数）执行此操作，并且工作得很好。

Answer 3

你可以使用jQuery的livequery插件，你可以从这里获得：http://docs.jquery.com/Plugins/livequery并在你的代码中更改以下行：

FROM：

$(".remove_part").click(function() {

TO：

$(".remove_part").livequery('click', function() {

这将监视动态添加的表单元素，并自动将点击绑定到它。希望有所帮助！

动态添加的HTML不会在Cakephp中使用JQuery动态删除

3 个答案: