Question

我有一个使用颜色选择器的表单，这是在Document Ready中使用表单选择输入标记定义的。但是我需要通过另一个页面中的AJAX访问一些数据并让响应替换该表单。当我这样做时，jquery colorpicker停止工作。我想重新加载Document Ready或其他东西会很酷。

否则我认为我唯一的选择是JSON将变量从PHP输出传递给jquery然后再传回html，对吗？

Answer 1

有两种基本方法可以实现这一目标。第一个是使用其他代码调用初始化颜色选择器的函数。另一种是手动重新触发文档的就绪事件。前者需要对颜色选择器代码进行少量修改，但后者将重新执行绑定到document.ready的所有函数。在执行之前确保这是您想要的。： - ）

// option one

function setupColorPicker() {
    // do color picking magic
}

$(document).ready(setupDatePicker);

$.ajax(options).done(setupColorPicker);

// option two

$(document).ready(function() {
    // do color picking magic
});

$.ajax(options).done(function() {
    $(document).trigger("ready"); // probably has unintended side-effects!
});

Answer 2

你可以让颜色选择器初始化脚本从它自己的函数运行，并在文档就绪中调用一次，再次在你的ajax调用的回调中调用。

Answer 3

您应该使用live或delegate方法注册活动：

Answer 4

从服务器传回数据作为JSON不仅可以实现您的目标，还可以提高应用程序的性能（SPEED）并节省带宽字节。如果您仍然希望以简单的html注入响应，只需在函数中初始化颜色选择器插件，并在ajax成功回调后调用该函数。

$(document).ready(function(){
    //page is ready

    function colorpicker(){
      //initialize your color picker

    }

    $.ajax({
      url: 'serverpage.cshtml', //whatever server page
      data: {data1: data1},
      success: function(){
        //append the response into the designated form or div
        colorpicker(); //fire the color picker function to refresh
      } 
    });
});

Ajax响应注入DOM后重新加载文档？

4 个答案: