在cakephp中重新渲染元素视图后，如何重新绑定javascript事件

Question

我的情况概述-

我有一个包含2个表的数据库。 第一个表称为“ primary_content_areas”，第二个表称为“ secondary_content_areas”。 唯一要注意的是，每个字段都包含一个ID，并且“ secondary_content_areas”表具有一个称为primary_content_area_id的字段。 primary_content_areas模型与secondary_content_areas具有hasMany关系。

使用Cakephp框架，我有一个名为Primary的元素视图，其中包含一个div。 在div内，有一个foreach循环，该循环遍历从控制器传入的数据，并根据有多少secondary_content_areas具有与当前primary_content_area id相等的primary_content_area_id来创建div。 数据库基本上会创建一个树结构，然后递归地循环遍历并在div内绘制div。 目前只有2层。 “主”元素视图中也有一个“添加”按钮。 单击此添加按钮后，它会使用jquery在secondary_content_areas表中创建一个新对象，并将字段'primary_content_areas_id'分配给添加按钮所属的div的ID。 然后，在相同的jquery流程中，如果成功，它将在控制器中加载一个函数，该函数重新呈现“ Primary”元素视图。 由于其设置方式，实际上，这会从“主要” div中重新渲染每个div，因此也会连接所有次要div。

我的问题 -

我有这个工作。 我的问题是，单击一次按钮后，它向数据库中添加了一个“辅助”对象，并呈现了一个新的div，但是此后按钮不起作用。 经过一些研究，我相信这与以下事实有关：使用jquery重新渲染视图，更具体地说是“添加”按钮，基本上可以解除DOM中所有事件的绑定。

所以我的问题是我如何使用cakephp重新绑定我的jQuery事件。

这是代码。

控制器----

...

public function add_secondary () {


    $this->layout = 'ajax';
    // check user is logged in
    if($this->Session->read('Auth.User'))
    {
        $this->Secondary->create();
        $content_area_id = $this->request->data['primary_content_area_id'];
        $this->Secondary->set('primary_content_area_id', $content_area_id);
        $this->Secondary->set('position', '1');


        if ($this->Column->save($this->request->data))
            {

                $result = array('result' => 'success', 'text' => 'Column Added');

            }
    }

    echo json_encode($result);
    die();

}

public function ajax_render () {
        $this->Primary->recursive = 5;
        $page_data = $this->Primary->find('first',array('conditions' => array('Primary.name' => 'index' ))); //temporary
        $this->set('page_data', $page_data);
        $this->render('/elements/primary');
    }
...

我最好的猜测是我觉得我需要在'$ this-> render（'/ elements / primary'）;之后插入一行； '那叫我的'bindEvents（）; 在我的Js中起作用。 我虽然找不到使用Cakephp从我的控制器中调用js函数的方法。

主要元素视图-

<?php foreach($page_data['ContentArea'] as $contentArea){  ?>
<div class="content_area <?php echo $contentArea['tags'] ?>" >
    <?php echo $this->element('secondary', array( "contentArea" => $contentArea));?>
    <div class="button_container">
        <div class="add_button content_area_add_button">
            <input class="add_content_area" id="add_content_area" type="submit" value="add" data-content-area-id="<?php echo $contentArea['id']?>" />
        </div>
    </div>
</div>

JS ----

function bindEvents() {
$("#add_content_area").click(function() {
    //alert($(this).data("content-area-id"));
    var request = $.ajax({
        type: "POST",
        url: "/pages/add_secondary/",
        dataType: "json",
        data: { content_area_id: $(this).data("content-area-id") }
    });

    request.done(function(result) {
        if(result.result == "success")
        {
            alert( "success" );
            $('#content').load('/pages/ajax_render/', function() {
                alert( "Load was performed." );
            });
        }
        else
        {
            alert("Comment " + result.result + ": " + result.text);
        }
    });

    request.fail(function(jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

});

}


$(document).ready(function() {
    bindEvents();
});

PS。 不会发生“警告（“已执行加载。”））。 我相信我的语法正确，它的意思是在完成加载后向该消息发出警报。 它不是。

Answer 1

与其重新绑定事件，不如考虑使用来自父元素的事件委托（不变），那么您无需重新绑定任何东西：

$("body").on('click', '#add_content_area', function(){
  .. do stuff
});

Answer 2

尝试将JS代码放在文件中，然后在afterRender（）函数中调用它

function afterRender() 
{
  echo $this->Html->script('UR JS', array('inline'=>false));
}

Answer 3

好的，所以我不确定这与其他人之间的相关性如何，但以为我会发布如何解决此问题。 原来我只是忘了这一行$this->layout = 'ajax'; 在public function ajax_render(); 。 一旦我添加了该内容， alert( "Load was performed." );发出alert( "Load was performed." ); 发生了。 相反，我用bindEvents();代替了该警报bindEvents(); 因此，在为我的ajax_render函数完成加载之后，它再次调用bindEvents（）。