0

部分 html 被替换为 ajax 调用的结果。在测试期间，我使那个 ajax 调用与被替换的完全一样。问题是我应用于旧 html 的 JQuery UI 和“onClick”内容都没有应用于新的 html。我尝试再次调用应用它的功能，但它不起作用。奇怪的是，如果我直接将它输入谷歌浏览器（new-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.
4

3 回答 3

4

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-26T16:27:46.477 回答
3

对于动态添加的内容，您需要使用委托的事件侦听器。查看 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
       }
    });
});
于 2013-06-26T16:27:27.213 回答
0

如果您有旧版本的 jQuery（如 1.6 和更早版本），请尝试使用

$(element).live("event", function(e) {
bla bla bla;
});
于 2013-06-26T16:46:04.260 回答