我的情况概述-

我有一个包含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。不会发生“警告(“已执行加载。”))。我相信我的语法正确,它的意思是在完成加载后向该消息发出警报。它不是。

最佳答案

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

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

10-01 15:34
查看更多