Question

我有一个页面，我在div中加载其他页面。

$(document).ready(function() {
    $(document).on("click", ".animalFinder", function()
    { 
    var $inputElement = $(this),
            inputName = $inputElement.attr("name");

    $("#freeload").show();
    $("#freeload").load("animaldetails.php?anmalid="+inputName);
    });
  });

它加载的页面包含一些关于动物的信息和一个脚本，使其警告用户动物的噪音。

$(document).on("click", "input.noisebutton", function() {   
    var answer = confirm("Want to play noise?")
    if (answer){             
             var $inputElements = $(this),
            inputNames = $inputElements.attr("name");
        alert(inputNames);
    }
    else{
        return false;   
    }
});

动物及其噪音在从数据库加载时被添加到名称字段中，因此我可以动态地为不同的动物创建页面。

问题是在我加载第一个动物页面后我没有删除它的方法，从页面上看，这没关系，除了再次创建动物详情页面中保存的脚本以及当我点击动物时加载到div中的下一个动物的噪音按钮，它运行脚本两次，因为它现在有两个实例。

我宁愿将脚本保存在动物页面中，因为它非常轻量级，仅用于那一个实例，这使得其余部分更加高效，因为动物详细信息页面与其他页面相比并不经常使用但我做需要一种方法来在删除新脚本时删除脚本或整个页面。

希望问题清楚

Answer 1

$("#freeload").empty()应该可以解决问题，但是您需要检查是否已经附加了事件处理程序/执行了代码。我会在加载的代码之外使用一个标志变量来指示脚本之前是否已经执行过一次，然后在重新附加处理程序之前检查该变量。如果您需要执行脚本，但旧处理程序已分离，请检查条件，然后分离处理程序并重新附加新处理程序。

您可能会考虑的另一件事（如果我正确地阅读您的评论）是在事件处理程序中使用flag变量来确定它是否应该执行内部代码，您设置为true的标志当您加载页面时，以及当您致电.empty()时，请将其设置回false

Answer 2

问题不在于标记，而在于您将处理程序多次绑定到document。由于您正在使用事件委派，因此您应该能够在容器页面中附加一次处理程序，并且每次加载动物页面时都不会重新绑定。

$(document).ready(function () {
    $(document).on("click", ".animalFinder", function () {
        var $inputElement = $(this),
            inputName = $inputElement.attr("name");

        $("#freeload").show();
        $("#freeload").load("animaldetails.php?anmalid=" + inputName);
    });

    $(document).on("click", "input.noisebutton", function () {
        var answer = confirm("Want to play noise?")
        if (answer) {
            var $inputElements = $(this),
                inputNames = $inputElements.attr("name");
            alert(inputNames);
        } else {
            return false;
        }
    });
});

删除已在div中加载的页面

2 个答案: