Jquery / Javascript如何在动态内容更新中表现？
最近我被分配到任务，我必须制作一个jquery方法，它将调用ajax。 当响应成功来自ajax请求时，我将响应html代码放在调用元素parent tr之后。
在我的回复HTML中，我编写了一个jquery切换函数来滑下一些信息并将文本更改为加号到减号，反之亦然。
但它很奇怪，现在当它添加到它，然后它完美地工作。
我正在使用jquery 1.7。
这是我的代码
这是主页面中的ajax
$(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('' + jd + ' '); } else { alert('Your request can not be process! Please refresh the page and try again') } } }); } }); }); 现在这个是用ajax响应写的：
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); }); });
现在我不清楚当删除那个live并将其作为.click .click(function()然后为什么它不工作？
我在Javasript / jquery中听起来不那么响
.live（）生成所谓的委托事件处理程序，它在第一次加载站点后将其挂钩到有问题的元素+动态生成的元素。 .click（）只执行从一开始就存在的元素。
但是，不推荐使用.live（），而应使用.on（） 。
你应该把jQuery api文档作为你现在的圣经。
截至jquery 1.8+
你必须使用.on()来bind和delegate events 。
.on()
对于delegatefunction而言，这是非常重要的，这在基本情况下就像在标记中附加或插入动态内容一样。
在这里查看： http ： //api.jquery.com/on/
要理解“实时”的观点，让我们以此为例：使用此页面：
简单的页面对吗？ 如果您使用如下所示的块视图：
+-------- | | +---- | |
当您将事件附加到html中的元素时，它们会自行“附加”自己：让我们在.myDiv上进行点击事件
- 普通点击：
$('.myDiv').click(function(){//do something}) - 实时点击（已弃用）：
$('.myDiv').live('click', function(){//do something}) - on（最佳方式）：
$(body).on('click','.myDiv', function(){// do something})
他们代表自己是这样的：
+--------+ | <- Event Click on .mydiv ex: ( $('.myDiv').live('click') | Or $(body).on('click','.mydiv')) | | | +-------- | | <- Event Click ex: ($('.myDiv').click()) | | | +-------- | +----------
现在您可以看到，当您使用.live时，事件会将您自己附加到html页面的根元素（通常是文档（））。
如果你添加（通过ajax）一个新的html元素：
+--------+ | <- Event Click on .mydiv ex: ( $('.myDiv').live('click') | Or $(body).on('click','.mydiv')) | | | +-------- | | <- Event Click ex: ($('.myDiv').click()) | | | +-------- | vv | +-------- | | -> Yay ! I'm new from ajax | | | +-------- | +----------
如果您在从Ajax获取新元素之前已在.myDiv上编写了“click”函数，则新元素将不会包含事件处理程序，并且将不执行任何操作因为事件通常是“附加”的到（a）HTML元素
但是正如你所看到的，在我的例子中的根元素上，事件仍然存在。 基本上，做“实时”或“开启”（更精确），将听取页面上的所有点击，当点击发生时，它将确定点击的区域是否是您想要的区域，从而触发您的function，只要标签在这里或只要它听取这些点击。 这就是事件授权的意思。
“on”的最佳实践是将事件附加到静态元素，该元素是动态获取的HTML的直接父级，因此只有重要区域才能监听事件。
希望有所帮助