Question

我正在为一个项目开发一个控制面板，我和我的一些代码有点冲突。我正在运行一些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'脚本来取消之前的实时代码在那个页面上。

有什么想法吗？

Answer 1

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

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

变为

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

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

Answer 2

我不确定我是否足够了解你的细节，但这就是我从中得到的。

首先，如果不是.one()要求的话，.live()听起来就像在这里拯救了你的背后一样。如果您可以设法重构代码以便可以利用.one()，那就太棒了。

除此之外，为什么不在你.die()函数的回调上粘贴.load()电话？从我所看到的，你的代码基本上是：

$('#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');
        });
    });
});

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

Answer 3

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

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

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

Answer 4

我会将bind（）用于任何用户输入产生load（）

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

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

4 个答案: