Question

我有一个函数可以移动一些div来点击div类＆＃34;关闭＆＃34;。这最初工作正常，但我用output.innerHTML编辑这些div的内容，当我这样做时，脚本不再工作了。

Javascript：

$(function()
{
       var open = true;
       $('.close').click(function() {
            if (open = true)
            {
                $("#upper").animate({'top' : '0px'}, {duration : 400});
                open = true;

                $("#lower").animate({'top' : '0px'}, {duration : 400});
                open = true;

                $("#filler").animate({'top' : '0px'}, {duration : 400});
                open = true;
            }
            else {
            }
       }); 
});

另外：

function enable() {
  var output = document.getElementById("passwordinfo");
  var sentence = '<h4>RE-ENABLE HMS MEDHOST ACCOUNT</h4>' + 
         '<div class="close" onclick="close()"></div>';
  var open = true;
  output.innerHTML = sentence;
}

功能＆＃34;启用＆＃34;输入div中的html，但是.close的onclick不再工作了。我在这里缺少什么想法？

Answer 1

在启用功能中，您可以重新添加点击事件：

function enable() {
var output = document.getElementById("passwordinfo");
var sentence = '<h4>RE-ENABLE HMS MEDHOST ACCOUNT</h4><div class="close" onclick="close()"></div>';
var open = true;
output.innerHTML = sentence;
$('.close').off('click')
$('.close').click(function()
    {
        ....
        ....
        ....
        ....
    }
}

我可能无法工作，因为您在添加click事件后添加了html。不要忘记使用.off（'click'），否则当你第一次添加事件时，事件会为dom中已经存在的元素触发两次

Answer 2

您应该使用.on或.live在DOM中动态添加元素。 if条件也是错误的。

试试这个：

$(function()
{
       var open = true;
       $(document).on("click", ".close", function() {
            if (open)
            {
                $("#upper").animate({'top' : '0px'}, {duration : 400});
                open = true;

                $("#lower").animate({'top' : '0px'}, {duration : 400});
                open = true;

                $("#filler").animate({'top' : '0px'}, {duration : 400});
                open = true;
            }
            else {
            }
       }); 
});

功能不适用于innerhtml

2 个答案: