Ajax加载后执行javascript文件

Question

我如何在ajax返回的数据上运行脚本asd.js？

的HTML

<script type="text/javascript" src="asd.js"></script>
<div class="one">
    <ul id="qwe"></ul>

</div>

的JavaScript

$(document).ready(function () {
    $('#search').click(function () {
            $.ajax({
                type: "POST",
                url: 'abc.php',
                data: {cid: cid},

                success: function (data) {
                 $("#qwe").html(data);
                }
            });

    });
});

从成功ajax返回的数据是：

<li> <a href="images3.jpg"><img src="images/a4.jpg"/>
         <span>
          <div class="title"><img src="Images/a5.jpg"/></div>
         </span>
      </a>
</li>

Answer 1

我假设asd.js添加了一些事件挂钩，或者您需要再次应用于HTML元素的事件挂钩是通过AJAX调用返回的。 因此-将asd.js的内容包装到一个函数中，在asd.js的末尾调用一次该函数，然后在设置$（'＃qwe'）。html（data）之后再次调用该函数。

如果您要添加事件挂钩或以其他方式使用DOM，则应从$（document）.ready（...）函数调用asd.js中的初始化函数（否则，这里可能存在潜在的竞争条件） ）

如果您无法更改asd.js，那么事情将会变得更加艰难。 确定哪些功能很重要，然后调用它们。 在最坏的情况下，您可以尝试动态删除并添加脚本标签以使其重新运行（但这太可怕了）。

编辑：好的，我想更清楚地说明这一点。 我假设asd.js只是加载脚本后立即执行的一系列操作，例如

// asd.js: wiring up a bunch of events 
document.getElementById('...').onclick = function() { doSomething(); };

如果是这种情况，您可以将其包装在以下函数中：

// asd.js: wiring up a bunch of events 
function init()
{
  document.getElementById('...').onclick = function() { doSomething(); };
}

init();

然后从响应处理程序中调用init（）：

success: function (data) {
           $("#qwe").html(data);
           init();
         }

从您的评论看来，asd.js看起来可能更像这样：

// asd.js: wiring up a bunch of events 
jQuery(function() {
  document.getElementById('...').onclick = function() { doSomething(); };
});

如果是这种情况，您将执行以下操作：

// asd.js: wiring up a bunch of events 
jQuery(function() { init(); });

function init()
{
  document.getElementById('...').onclick = function() { doSomething(); };
}

jQuery行可以缩短：

jQuery(init);

Answer 2

对不起，但是我不能做编辑。

*这是asd.js包含的内容（如果有帮助）：*

var yoxviewPath = getYoxviewPath();
var cssLink = top.document.createElement("link");
cssLink.setAttribute("rel", "Stylesheet");
cssLink.setAttribute("type", "text/css");
cssLink.setAttribute("href", yoxviewPath + "yoxview.css");
top.document.getElementsByTagName("head")[0].appendChild(cssLink);

function LoadScript(url)
{
    document.write( '<scr' + 'ipt type="text/javascript" src="' + url + '"><\/scr' + 'ipt>' ) ;
}

var jQueryIsLoaded = typeof jQuery != "undefined";

if (!jQueryIsLoaded)
    LoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");

LoadScript(yoxviewPath + "jquery.yoxview-2.2.min.js");

function getYoxviewPath()
{
    var scripts = document.getElementsByTagName("script");
    var regex = /(.*\/)yoxview-init/i;
    for(var i=0; i<scripts.length; i++)
    {
        var currentScriptSrc = scripts[i].src;
        if (currentScriptSrc.match(regex))
            return currentScriptSrc.match(regex)[1];
    }

    return null;
}
// Remove the next line's comment to apply yoxview without knowing jQuery to all containers with class 'yoxview':
LoadScript(yoxviewPath + "yoxview-nojquery.js");