0

我有一个页面，我在 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 中的下一个动物会运行脚本两次，因为现在有两个实例。

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

希望问题很清楚

4

2 回答 2

1

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

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

于 2013-10-16T15:50:14.030 回答
1

问题不在于标记，而在于您将处理程序绑定到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;
        }
    });
});
于 2013-10-16T15:54:03.650 回答