Question

我是AJAX的新手，也有Java / Jquery的经验。我一直在寻找解决我的问题但我似乎无法找到任何解决方案。

我正在尝试在网上商店中构建一个功能，产品将显示在弹出窗口中，而不是加载新页面。

我使用此代码使其工作：

$(".product-slot a").live('click', function() {
  var myUrl = $(this).attr("href") + " #product-content";
  $("#product-overlay-inner").load(myUrl, function() {
  });
  $("#product-overlay").fadeIn();
  return false;
});

product-slot a =链接到类别页面中的产品 product-content =我想在产品页面的弹出窗口中插入的div product-overlay-inner =弹出窗口。
product-overlay =弹出包装器。

我现在遇到的问题是我的Javascript / Jquery不在productpopup中工作。例如，产品图像的灯箱或将产品添加到shoppingcart的按钮不起作用。反正有没有让javascript在加载的内容中工作或者将javascript加载到弹出窗口中？

我希望你能理解我的问题是什么！

提前谢谢！

编辑：我正在使用的平台有jquery-ui-1.7.2

Answer 1

我知道这是一个旧帖子，但我一直在使用相同的脚本加载问题处理类似的过程，并认为我将我的版本作为另一个选项共享。

我有一个基本的路由处理程序，用于当用户点击我用来换掉网站主要内容区域的锚点/按钮等时，在这个例子中它是＆＃34; .page＆＃34 ;类。

然后我使用函数进行ajax调用以获取html内容作为部分，目前它们是php文件，并且他们做了一些初步渲染服务器端来构建html但是这不是必需的。

回调处理放置新的html，因为我知道我需要什么脚本，我只需将它附加到动态创建的脚本标记的底部。如果我在服务器上有错误，我将其作为内容传回去，这可能只是一个关键词，我可以用来触发自定义js方法来打印更有意义的页面。

这是基于注册路由处理程序的基本实现：

var register = function(){
    $(".page").html("");
    // use the getText ajax function to get the page content:
    getText('partials/register.php', function(content) {
        $(".page").html(content);
        var script = document.createElement('script');
        script.src = "js/register.js";
        $(".page").append(script);
    });
};




/******************************************
 * Ajax helpers
 ******************************************/
// Issue a Http GET request for the contents of the specified Url.
// when the response arrives successfully, verify it's plain text
// and if so, pass it to the specified callback function
function getText(url, callback) {
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function() {
        // if the request is complete and was successful -
        if (request.readyState === 4 && request.status === 200) {
            // check the content type:
            var type = request.getResponseHeader("Content-Type");
            if (type.match(/^text/)) {
                callback(request.responseText);
            }
        }
    };
    // send it:
    request.send(null); // nothing to send on GET requests.
}

我发现这是一个很好的方式来模块化＆＃39;我的代码分为部分视图和分离的JavaScript文件，可以轻松地在页面内/外交换。我将努力使这个更加动态，甚至缓存这些模块＆＃39;在SPA场景中重复使用。

我对网络开发相对较新，所以如果你能看到任何问题，或者更安全/更好的方式，我全心全意：）

Answer 2

是的，您可以从动态页面加载Javascript，但不能加载load()，因为load会删除任何Javascript并插入原始HTML。

解决方案：使用get下拉原始页面并重新附加任何Javascript块。

道歉，这是在Typescript中，但你应该明白（如果有的话，强类型的TypeScript比普通的Javascript更容易阅读）：

    _loadIntoPanel(panel: JQuery, url: string, callback?: { (): void; })
    {
        // Regular expression to match <script>...</script> block
        var re = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
        var scripts: string = "";
        var match;

        // Do an async AJAX get
        $.ajax({
            url: url,
            type: "get",
            success: function (data: string, status: string, xhr)
            {
                while (match = re.exec(data))
                {
                    if (match[1] != "")
                    {
                        // TODO: Any extra work here to eliminate existing scripts from being inserted
                       scripts += match[0];
                    }
                }

                // Replace the contents of the panel
                //panel.html(data);

                // If you only want part of the loaded view (assuming it is not a partial view)
                // using something like
                panel.html($(data).find('#product-content'));

                // Add the scripts - will evaluate immediately - beware of any onload code
                panel.append(scripts);

                if (callback) { callback(); }
            },
            error: function (xhr, status, error)
            {
                alert(error);
            }
        });
    }

带有钩子的简单JQuery / Javascript版本：

它会像：

    var _loadFormIntoPanel = function (panel, url, callback) {
        var that = this;
        var re = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
        var scripts = "";
        var match;
        $.ajax({
            url: url,
            type: "get",
            success: function (data, status, xhr) {
                while(match = re.exec(data)) {
                    if(match[1] != "") {
                        // TODO: Any extra work here to eliminate existing scripts from being inserted
                        scripts += match[0];
                    }
                }
                panel.html(data);
                panel.append(scripts);
                if(callback) {
                    callback();
                }
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });
    };

$(".product-slot a").live('click', function() {
    var myUrl = $(this).attr("href") + " #product-content";
    _loadFormIntoPanel($("#product-overlay-inner"), myUrl, function() {
         // Now do extra stuff to loaded panel here
    });
  $("#product-overlay").fadeIn();
  return false;
});

将Javascript加载到ajax加载的内容中

2 个答案:

带有钩子的简单JQuery / Javascript版本：