jQuery - 每次调用“.load”函数时运行 jQuery 脚本？答案

【问题标题】：jQuery - Run jQuery script each time a ".load" function is called?jQuery - 每次调用“.load”函数时运行 jQuery 脚本？
【发布时间】：2011-11-27 02:27:21
【问题描述】：

我正在为一个项目开发一个控制面板，但我的一些代码与我的一些代码有些冲突。我正在运行一些 jQuery，以便每个链接都将请求页面的内容插入到 DIV 中。此代码位于 index.php 页面中，因此无论如何它都位于要运行的页面上的第一个位置。您永远不会真正离开索引。

$('a').live("click",function(){
var external = $(this).attr('class');
if (external == "externalLink") {
return true;
}
var page = $(this).attr('href');
if (!(page == "#") && (page)) {
    $("#loading").fadeToggle("fast", "linear");
    $("#split-view-right #content").load(page, function(){
        var parentHeader = $("#split-view-right #content #parentHeader").html();
        $("#split-view-right #header").html(parentHeader);  
        $("#loading").fadeToggle("fast", "linear");
    });
}
return false;
});

在#header 中，我还放了一些代码，包括一些按钮。其中一些我只是链接到一个页面，效果很好，但有些我需要运行脚本。当我尝试定义要在其中一个页面上运行的脚本时，除非我使用“.live”运行它，否则它将找不到按钮。问题是，当我在运行该实时脚本后尝试转到另一个页面时，它会忽略超链接并再次运行该代码。下面是正在运行的代码示例。

$(function() {
$("#headerbutton").live('click', function() {
    $("#loading").fadeToggle("fast", "linear");
    var title = $("input#title").val();
    var partnum = $("input#partnum").val();
    var descript = $("textarea#descript").val();    
    var startprice = $("input#startprice").val();
    var minprice = $("input#minprice").val();
    var domship = $("input#domship").val(); 
    var intship = $("input#intship").val();
    var startdate = $("input#startdate").val();
    var droprate = $("input#droprate").val();   
    var dataString = 'title='+title+'&partnum='+partnum+'&descript='+descript+'&startprice='+startprice+'&minprice='+minprice+'&domship='+domship+'&intship='+intship+'&startdate='+startdate+'&droprate='+droprate;    
    $.post("savenewproduct.php",
    { "title": title, "partnum": partnum, "descript": descript, "startprice": startprice, "minprice": minprice, "domship": domship, "intship": intship, "startdate": startdate, "droprate": droprate },     
    function(postdata){
        $("#split-view-right #content").load('upload_images.php?id=' + postdata.newID, function(){
            var parentHeader = $("#split-view-right #content #parentHeader").html();
            $("#split-view-right #header").html(parentHeader);  
            $("#loading").fadeToggle("fast", "linear");
        });
    }, "json");
    return false;
});
});

我想做的（除非有更好的解决方案）是让每次运行“.load”时，我都可以运行“.die”脚本来取消以前的实时代码在那个页面上。

有什么想法吗？

【问题讨论】：

标签： jquery function load die

【解决方案1】：

不确定这是否有帮助，但您可以尝试使用：

$('a:not(.external)').live("click", function(e){
    e.preventDefault();
    ....
}

这将阻止浏览器默认跟踪链接并允许您执行代码。

【讨论】：

【解决方案2】：

我会使用 bind() 来处理任何用户输入产生的 load()

http://api.jquery.com/bind/

【讨论】：

【解决方案3】：

我不确定我是否足够了解您的详细信息，但这就是我从中得到的。

首先，如果不是因为.live() 的要求，听起来.one() 会在这里拯救你。如果您能够设法重构代码以便利用.one()，那就太好了。

除此之外，为什么不在.load() 函数的回调上加上.die() 调用呢？据我所知，您的代码基本上是：

$('#headerbutton').live('click', function() {
    // some stuff
    $.post(foo, bar, function () {
        $("#split-view-right #content").load(herp, function () {
             // some stuff
             // some more stuff
             // ...
             // what's stopping you from doing something like this:

             $('#headerbutton').die('click');
        });
    });
});

这将有效地取消 #headerbutton 上的 .live() 处理程序。

【讨论】：

出于某种原因，当我这样做时，它不起作用。我将其设置为单击后要运行的第一件事，这对我有用。我只需要记住每次都放那一点。
如果你这样做，即使你的.load() 调用失败，.die() 也会发生，所以请记住这一点。 :D
没关系。它只是我们构建的网站内部使用的控制面板。如果失败，您只需单击左侧的“产品”选项卡即可将您带到按钮将带您到的相同位置。

【解决方案4】：

首先，可以简化以下代码：

$('a').live("click",function(){
  var external = $(this).attr('class');
  if (external == "externalLink") {
    return true;
  }
  ...

变成

$('a:not(.external)').live("click",function(){
  ...

就脚本的加载问题而言，如果您正在加载包含脚本的页面，请确保脚本始终位于它们正在修改的元素之后。 $(function(){}); 在这里实际上不会帮助您，因为在加载主索引时已经触发了 DOMReady 事件。

【讨论】：