Question

想象一下正常的页面调用javscript。麻烦是一些内容没有加载，直到我点击一个链接。随后当此链接加载内容时，它将无法工作。这是因为我猜javascript已经运行，因此不会将自己附加到稍后调用的那些元素上。只有标准的html被调用。

例如，这是调用我的外部html的代码。

$.get('content.inc.php', {id:id}, function(data){
        $('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
           $(this).html(data).slideDown('slow');
        });
    });

如果html我正在调用示例并且H1标签已经在页面中，则cufon可以正常工作。但是因为我通过上面的方法加载内容H1标签不会用我选择的字体更改。这只是一个例子。这同样适用于任何javascript。

我想知道是否有一种解决方法，如果没有调用javascript以及从上面的函数收到的html

Answer 1

如果要将事件附加到页面上动态创建的元素，请查看“live”关键字。

$('H1').live("click", function() { alert('it works!'); });

希望这就是你要找的东西。

Answer 2

Cufon.refresh()能做你想做的吗？

正如你所说Cufon 只是一个例子，我还建议更一般：

$.get(url, options, function(html, status) {
    var dom = $(html);
    // call your function to manipulate the new elements and attach
    // event handlers etc:
    enhance(dom);

    // insert DOM into page and animate:
    dom.hide();
    $target_element.append(dom); // <-- append/prepend/replace whatever.
    dom.show(); // <-- replace with custom animation
});

Answer 3

您可以将事件处理程序附加到通过回调函数内部的get()获得的数据。例如

$.get('content.inc.php', {id:id}, function(data){
    $('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){        
        $(this).html(data).find('a').click(function(e) {
            // specify an event handler for <a> elements in returned data
        }).end().slideDown('slow');
    });
});

live()也可能是您的选项，具体取决于您要绑定的事件（因为live()使用事件委派，not all events are supported）。

Answer 4

安迪试试这个。它会在每个AJAX请求完成之后以及html实际添加到页面之前调用Cufon代码。

$.get('content.inc.php', {id:id}, function(data){
    $('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
        $(this).html(data);
        Cufon.replace('h1');
        $(this).slideDown('slow');
    });
});

Answer 5

由于安全原因，未执行JavaScript或因为jQuery只是将此元素的innerHTML设置为某些文本（如果它被包含，则不会被解释为JavScript）。因此，安全性是旁边效应。

如何解决？

尝试在您的回复中找到所有SCRIPT标记并将其作为休闲符号执行：

var scripts = myelement.getElementsByTagName("SCRIPT");
var i = 0;

for (i = 0; i < scripts.length; i++)
   eval(scripts[i].innerHTML);

在jQuery GET加载后，在页面中调用Javascript

5 个答案: