我的情况概述-
我有一个包含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
});