Jquery/Javascript在动态内容更新中的行为如何？
最近我被分配到一个任务中，我必须创建一个jquery方法，该方法将调用ajax。 当来自ajax请求的响应成功时，我将该响应html代码放在调用元素父tr之后 在我的HTML响应中，我编写了一个jquery切换函数来向下滑动一些信息，并将文本更改为加号到减号，反之亦然 但是它工作起来很奇怪，现在当它被添加到live中时，它就工作得很好了 我使用的是jQuery1.7 这是我的密码 这是在主页中针对ajax的Jquery/Javascript在动态内容更新中的行为如何？,javascript,jquery,Javascript,Jquery,最近我被分配到一个任务中，我必须创建一个jquery方法，该方法将调用ajax。 当来自ajax请求的响应成功时，我将该响应html代码放在调用元素父tr之后 在我的HTML响应中，我编写了一个jquery切换函数来向下滑动一些信息，并将文本更改为加号到减号，反之亦然 但是它工作起来很奇怪，现在当它被添加到live中时，它就工作得很好了 我使用的是jQuery1.7 这是我的密码 这是在主页中针对ajax的 <script type="text/javascript" >
<script type="text/javascript" >
$(document).ready(function() {
$('.loadCampaign').click(function(e) {
//e.preventDefault();
var campId = $(this).attr('id');
var arr = campId.split('_');
campId = arr[1];
var parentTrId = '#campaign_tr_' + campId;
var cBodyClass = campId + '-cBody';
var body = $('.' + 'trView_' + campId);
if (body.length) {
body.remove();
} else {
$.ajax({
//dataType: "json",
url: '{{config.adminUrl}}/campaign/loadCamapaignDetails',
data: {'id': campId},
type: 'get',
success: function(jd)
{
if (jd !== '0') {
$(parentTrId).after('<tr id="view_content" class="even ' + cBodyClass + ' trView_' + campId + '">' + jd + '</tr>');
} else {
alert('Your request can not be process! Please refresh the page and try again')
}
}
});
}
});
});
</script>
$（文档）.ready（函数（）{
$（'.loadCampaign'）。单击（函数（e）{
//e、 预防默认值（）；
var campId=$（this.attr（'id'）；
var arr=campId.split（''）；
campId=arr[1]；
var parentTrId='#campaign_tr'+campId；
var cBodyClass=campId+'-cBody'；
变量主体=$（'.'+'trView_'+campId）；
if（体长）{
主体。移除（）；
}否则{
$.ajax({
//数据类型：“json”，
url:“{config.adminUrl}}/campaign/loadCamapaignDetails”，
数据：{'id'：campId}，
键入：“get”，
成功：功能（jd）
{
如果（jd！=“0”）{
$（parentTrId）.在（''+jd+''）之后；
}否则{
警报（'无法处理您的请求！请刷新页面并重试'）
}
}
});
}
});
});
<script type="text/javascript" >
function showHideDate(id){
$('#showHideDate_'+id).toggle(function(){
$("#bookedDates_"+id).slideDown(
function(){
$('#showHideDate_'+id).text("-")
}
);
},function(){
$("#bookedDates_"+id).slideUp(
function(){
$('#showHideDate_'+id).text("+")
}
);
});
};
$(document).ready(function(){
$('.plus').live('click',function(){
var id=$(this).attr('id');
var idArr=id.split('_');
id=idArr[1];
//alert(id);
showHideDate(id);
});
});
</script>
函数showHideDate（id）{
$（'#showHideDate'+id）.toggle（函数（）{
$（“#bookedDates”+id）。向下滑动(
函数（）{
$（'#showHideDate'+id）.text（“-”）
}
);
}，函数（）{
$（“#bookedDates”+id）.slideUp(
函数（）{
$（'#showHideDate'+id）.text（“+”）
}
);
});
};
$（文档）.ready（函数（）{
$（'.plus'）.live（'click'，function（）{
var id=$（this.attr（'id'）；
var idArr=id.split（“”）；
id=idArr[1]；
//警报（id）；
显示隐藏（id）；
});
});
时，单击（function（）但是，它已被弃用，您应该改用。从现在起，您应该将
jQuery.on（）和委派事件
.on()
对于itdelegate
功能来说，这是非常重要的，在像向标记中添加或插入动态内容这样的情况下，这是最基本的
在这里查看：
从现在起，您应该将jQuery
api文档作为您的圣经
截至jquery 1.8+
您必须使用.on（）
来绑定和委派事件
.on()
对于itdelegate
功能来说，这是非常重要的，在像向标记中添加或插入动态内容这样的情况下，这是最基本的
在这里查看：
要理解“生活”的意义，让我们举个例子：
在本页中：
<html>
<body>
<div class=".myDiv"></div>
</body>
</html>
现在您可以看到，当您使用.live时，事件将自身附加到html页面的根元素（通常是文档（）中）
如果（通过ajax）添加新的html元素：
+--------+
|<body> <- Event Click on .mydiv ex: ( $('.myDiv').live('click')
| Or $(body).on('click','.mydiv'))
|
|
| +--------
| | <div .myDiv> <- Event Click ex: ($('.myDiv').click())
| |
| +--------
| vv
| +--------
| | <div .myDiv> -> Yay ! I'm new from ajax
| |
| +--------
|
+----------
+--------+
|为了理解“活”的意义，让我们举个例子：
在本页中：
<html>
<body>
<div class=".myDiv"></div>
</body>
</html>
现在您可以看到，当您使用.live时，事件将自身附加到html页面的根元素（通常是文档（）中）
如果（通过ajax）添加新的html元素：
+--------+
|<body> <- Event Click on .mydiv ex: ( $('.myDiv').live('click')
| Or $(body).on('click','.mydiv'))
|
|
| +--------
| | <div .myDiv> <- Event Click ex: ($('.myDiv').click())
| |
| +--------
| vv
| +--------
| | <div .myDiv> -> Yay ! I'm new from ajax
| |
| +--------
|
+----------
+--------+
|这就是live
@David hedlund Why live！！jquery中的绑定是什么？你必须使用1.7吗？@steo我刚刚使用了现有的项目代码，这就是live
@David hedlund Why live！！jquery中的绑定是什么？你必须使用1.7吗？@steo我刚刚使用了现有的项目代码项目代码是yYes我知道不推荐的点！！你能给我一些链接，我可以在那里读到的事件处理程序的jquery@RohitKumarChoudhary我链接了live
，点击和上的事件的同一个站点。因此，是的，我知道不推荐的观点！！你能推荐我一些链接吗e我可以阅读有关的事件处理程序jquery@RohitKum