JQuery对新元素没有影响

html的一部分被替换为ajax调用的结果。在测试期间，我让ajax调用与被替换的完全相同的东西。问题是，我没有应用于旧HTML的JQuery UI和“onClick”材料适用于新的。我试着回想一下再次应用它的功能，但它不起作用。奇怪的是，如果我直接将它输入到谷歌浏览器的建议中（新的Ajax-html受JQuery命令影响），它会起作用。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.

来源

2013-06-26 sinθ

使用'$（文件）。在（ '点击'， '.delete按钮'，函数使用'.on（）'将一个click事件绑定到所有当前和将来的'.delete-button'元素上，除非你想让整个'set_up（）'再次运行， case使用Brad M的解决方案 – Joe

它看起来像是在替换发生之前调用set_up（） –

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()会将值转换为字符串/数字/布尔值，但在这种情况下，它将全部连接到字符串。将以下内容复制并粘贴到控制台中以查看。

$(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"

来源

2013-06-26 16:27:46

为什么它不能在外面工作？不在里面的原因是因为添加了多个，所以我认为最后这样做会更有效率。 –

你确定$ .when在一系列被攻击的对象上工作吗？ –

@roasted调整，使其工作，感谢指出。 –

对于动态添加的内容，您需要使用委派的事件侦听器。查看jQuery的文档on()了解更多详情。

喜欢的东西：

$(document).on('click', '.delete-button', function() {...});

UPDATE

正如其他人所指出的那样，$.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 
     } 
    }); 
});

来源

2013-06-26 16:27:27 cfs

将事件处理程序附加到通过ajax添加的内容是合法的，不需要委派监听程序 –

我有一个类似的问题在这里相同的答案http://stackoverflow.com/questions/4208219/how-to-do-following-mask-input-problem/10203361#10203361 –

谢谢，但只解决了点击部分。 datepicker和.makeMulti怎么样？ –

如果你的jQuery的旧版本（如1.6及以上），请尝试使用

$(element).live("event", function(e) { 
bla bla bla; 
});

来源

2013-06-26 16:46:04

JQuery对新元素没有影响

回答

相关问题