Cakephp: multiply jquery 绑定冲突
Cakephp: multiply jquery binds conflict
我在一个页面上放置了几个 jquery 滑块、一些复选框和单选按钮。
I post 是在滑动停止、更改复选框、更改或单选按钮时创建的。这很好用。
在同一页面上有一个 table 显示了此信息,在出站链接的按钮中,我放置了 id posted 到另一个控制器以跟踪出站点击与他们的身份证。
单击按钮时,使用 jquery 到此点击控制器完成带有 ID 的 post。
这在不使用滑块、复选框、单选按钮时效果很好。一旦触摸其中一个元素,按钮上的此点击控制器的 post 就不再起作用。
这是 javascript 的样子:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$(".btn").bind("click", function (event) {
$.ajax({
async: true,
data: "id=" + $(this).attr("id"),
dataType: "html",
type: "POST",
url: "\/clicks"
});
return false;
});
$("#saveForm").bind("slideStop", function (event) {
$.ajax({
async:true,
beforeSend:function (XMLHttpRequest) {
$("#loading").attr("style", " ")
},
complete:function (XMLHttpRequest, textStatus) {
$("#loading").attr("style", "display:none")
},
data:$("#saveForm").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#resultaat").html(data);
},
type:"POST",
url:"\/abonnements"
});
return false;
});
$(".checkbox").bind("change", function (event) {
$.ajax({
async:true,
beforeSend:function (XMLHttpRequest) {
$("#loading").attr("style", " ")
},
complete:function (XMLHttpRequest, textStatus) {
$("#loading").attr("style", "display:none")
},
data:$("#saveForm").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#resultaat").html(data);
},
type:"POST",
url:"\/abonnements"
});
return false;
});
$(".radio").bind("change", function (event) {
$.ajax({
async:true,
beforeSend:function (XMLHttpRequest) {
$("#loading").attr("style", " ")
},
complete:function (XMLHttpRequest, textStatus) {
$("#loading").attr("style", "display:none")
},
data:$("#saveForm").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#resultaat").html(data);
},
type:"POST",
url:"\/abonnements"
});
return false;
});
});
//]]>
</script>
我认为这是由同一页面上的多个 post 引起的,但我不确定。我一整天都在尝试解决这个问题,但找不到解决方案。
更新:
我找到了导致其他功能失败的原因。
$this->Js->get('#saveForm')->event(
'slideStop',
$this->Js->request(
array('action' => 'index', 'controller' => 'abonnements'),
array(
'update' => '#resultaat',
'data' => $data,
'async' => true,
'dataExpression'=>true,
'method' => 'POST',
'before' => '$("#loading").attr("style", " ")',
'complete' => '$("#loading").attr("style", "display:none")'
))
);
#resultaat table 中显示的 .btn 操作在 slideStop 操作完成更新时被破坏。
按钮是这样的:
<td>
<?php echo $this->Html->link('Meer Info',
$link,
array('class' => 'btn btn-primary btn-block',
'target' => '_blank',
'id' => $abonnement['Abonnement']['id']
)
);
?>
</td>
需要id。
我已通过将按钮单击的 jquery 代码放置在由另一个 jquery 函数更新的元素上来解决此问题。当滑块更新放置另一个绑定的元素时,它以某种方式丢失了绑定。
我在一个页面上放置了几个 jquery 滑块、一些复选框和单选按钮。
I post 是在滑动停止、更改复选框、更改或单选按钮时创建的。这很好用。
在同一页面上有一个 table 显示了此信息,在出站链接的按钮中,我放置了 id posted 到另一个控制器以跟踪出站点击与他们的身份证。
单击按钮时,使用 jquery 到此点击控制器完成带有 ID 的 post。
这在不使用滑块、复选框、单选按钮时效果很好。一旦触摸其中一个元素,按钮上的此点击控制器的 post 就不再起作用。
这是 javascript 的样子:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$(".btn").bind("click", function (event) {
$.ajax({
async: true,
data: "id=" + $(this).attr("id"),
dataType: "html",
type: "POST",
url: "\/clicks"
});
return false;
});
$("#saveForm").bind("slideStop", function (event) {
$.ajax({
async:true,
beforeSend:function (XMLHttpRequest) {
$("#loading").attr("style", " ")
},
complete:function (XMLHttpRequest, textStatus) {
$("#loading").attr("style", "display:none")
},
data:$("#saveForm").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#resultaat").html(data);
},
type:"POST",
url:"\/abonnements"
});
return false;
});
$(".checkbox").bind("change", function (event) {
$.ajax({
async:true,
beforeSend:function (XMLHttpRequest) {
$("#loading").attr("style", " ")
},
complete:function (XMLHttpRequest, textStatus) {
$("#loading").attr("style", "display:none")
},
data:$("#saveForm").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#resultaat").html(data);
},
type:"POST",
url:"\/abonnements"
});
return false;
});
$(".radio").bind("change", function (event) {
$.ajax({
async:true,
beforeSend:function (XMLHttpRequest) {
$("#loading").attr("style", " ")
},
complete:function (XMLHttpRequest, textStatus) {
$("#loading").attr("style", "display:none")
},
data:$("#saveForm").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#resultaat").html(data);
},
type:"POST",
url:"\/abonnements"
});
return false;
});
});
//]]>
</script>
我认为这是由同一页面上的多个 post 引起的,但我不确定。我一整天都在尝试解决这个问题,但找不到解决方案。
更新:
我找到了导致其他功能失败的原因。
$this->Js->get('#saveForm')->event(
'slideStop',
$this->Js->request(
array('action' => 'index', 'controller' => 'abonnements'),
array(
'update' => '#resultaat',
'data' => $data,
'async' => true,
'dataExpression'=>true,
'method' => 'POST',
'before' => '$("#loading").attr("style", " ")',
'complete' => '$("#loading").attr("style", "display:none")'
))
);
#resultaat table 中显示的 .btn 操作在 slideStop 操作完成更新时被破坏。
按钮是这样的:
<td>
<?php echo $this->Html->link('Meer Info',
$link,
array('class' => 'btn btn-primary btn-block',
'target' => '_blank',
'id' => $abonnement['Abonnement']['id']
)
);
?>
</td>
需要id。
我已通过将按钮单击的 jquery 代码放置在由另一个 jquery 函数更新的元素上来解决此问题。当滑块更新放置另一个绑定的元素时,它以某种方式丢失了绑定。