JQuery对新元素没有影响
JQuery having no effect on new elements
html的一部分被ajax调用的结果所替换。在测试过程中,我使ajax调用与被替换的调用完全相同。问题是,我应用于旧html的JQueryUI和"onClick"内容都没有应用于新html。我试着再次调用应用它的函数,但它不起作用。奇怪的是,如果我直接将其输入到googlechrome的advisor中,它确实有效(新的ajax html受到JQuery命令的影响)。
这是我的代码,其中包括开始时html的原始设置(有效)和第二次设置(在所有需要的元素都实例化之后):
function set_up() { // <-- if I call this function in the consul, it works.
$('.delete-button').click(function() {
var confirm = window.confirm("Are you sure you want to delete? After you save, this file will not be recoverable.")
if (confirm){
$(this).parent('.deletable-group').remove()
}
});
$('.field-default[data-multi="True"]').makeMulti();
$("input.field-input-date").datepicker();
alert("HERE!") //Is reached both times I call the function. So the code above is executing.
}
var options = {
target: '.server-response-box',
success: function() { //<--- Gets called when the ajax call goes through.
$('.needs-update').each(function( index ) {
url = "/field/1/" + $('.edit-wrapper').attr('data-entry-ID') + "/" + $(this).attr('data-field-id');
old_this = this
$.get(url,function(data){
$(old_this).replaceWith(data);
});
});
set_up(); // Tries to set everything up again.
},
beforeSubmit: function(arr, $form, options) {
}
};
$('#form').ajaxForm(options);
set_up(); //<-- sets it all up the first time.
set_up(); // Tries to set everything up again.
ajaxForm成功回调函数中的这一行应该只在所有GET
请求执行后执行。
var getRequests = [];
$('.needs-update').each(function( index ) {
url = "/field/1/" + $('.edit-wrapper').data('entry-ID') + "/" + $(this).data('field-id');
old_this = this;
var ajaxGet = $.get(url,function(data){
$(old_this).replaceWith(data);
});
getRequests.push(ajaxGet);
});
$.when.apply($, getRequests).done(set_up); // Tries to set everything up again.
这样做的目的是为所有GET
请求创建一个延迟对象数组,当它们完成时,就会调用set_up
函数。
编辑-将.attr(data-stuff)
的使用更改为仅使用.data(stuff)
。注意,.data()
将把一个值强制转换为string/number/bool,但在这种情况下,它全部连接到字符串。将以下内容复制并粘贴到控制台中即可查看。
$(this).data('id', 1);
var x = "test" + ($(this).data('id') + $(this).data('id'));
var y = "test" + $(this).data('id') + $(this).data('id');
console.log(x); // "test2"
console.log(y); // "test11"
对于动态添加的内容,您需要使用委托的事件侦听器。有关更多详细信息,请查看jQuery的on()文档。
类似于:
$(document).on('click', '.delete-button', function() {...});
更新
正如其他人所指出的,$.get()
是异步的。在所有调用完成后调用set_up(),但不一定是在它们返回之后。要做到这一点,请使用计数器跟踪返回的数量,然后在它们全部完成后调用set_up():
var needsUpdate = $('.needs-update');
var numberToUpdate = needsUpdate.length;
var numberUpdated = 0;
needsUpdate.each(function( index ) {
url = "/field/1/" + $('.edit-wrapper').attr('data-entry-ID') + "/" + $(this).attr('data-field-id');
old_this = this
$.get(url,function(data){
numberUpdated++;
$(old_this).replaceWith(data); //update HTML
if(numberUpdated === numberToUpdate) {
setup(); //when all HTML added, then initialize widgets and add listeners
}
});
});
如果您有较旧版本的jQuery(如1.6及更早版本),请尝试使用
$(element).live("event", function(e) {
bla bla bla;
});
相关文章:
- 当知道同一hiearch中至少有一个元素时,遍历到元素.结构使用jquery
- 如果有许多元素使用相同的类,我如何使用JavaScript获取特定的元素
- 为什么未执行的评估对某些浏览器中的行为有影响
- 如果循环中至少有一个元素返回 false,如何将变量设置为 false
- 如何使用.find()判断某个元素是否有子元素
- 检查是否有任何元素具有焦点
- 具有固定元素并填充有其他元素的页面
- document.getElementsByClassName不会影响元素
- 有阶级元素的孩子
- D3.js:enter(),update,exit(),中间有组元素
- 如果没有列表元素有子元素,则删除父元素
- 我有一系列元素.想要以第一个值作为键分成组
- 了解 SVG 中其他元素上是否有一些元素
- 我如何获得一个JS数组,它有一些元素也是数组,并使ALL数组元素成为顶级元素
- 如何检测元素外部的点击,但该元素有子元素
- Javascript显示根XML文件中有多少元素
- 当标签中有form元素时,使用Query更改标签
- 在第一个下拉值有子元素,然后用户在第二个下拉列表中选择相同的值应该使用 jquery 接受
- 检测每个函数中是否有一个元素为空
- 如果元素有子元素html元素