Javascript 防止按钮永久消失

在下面的代码中，当我单击“投票”时，将显示投票结果屏幕，但当我单击“返回投票”时，投票将重新显示，但“显示选项”按钮不再可见。是否有方法防止在单击“返回投票”时隐藏此按钮

这是小提琴：

.pds-pd-link{
显示：无！重要；
}
.pds盒{
宽度：200px！重要；
}
.pds输入标签{
宽度：自动！重要；
}
.PDS_民意测验{
边缘底部：15px；
}
$（文档）.ready（函数（）{
$（'.pds问题'）。附加（''）；
$（'.pds vote'）.css（'display'，'none'）；
$（'.pds answer'）.css（'display'，'none'）；
$（'.pds投票按钮'）.css（'display'，'none'）；
$（'.pds view results'）.css（'display'，'none'）；
$（'.showanswer'）。在（'click'，函数（）{
$（'.pds vote'）.show（）；
$（'.pds answer'）.show（）；
$（'.pds投票按钮'）.show（）；
$（'.pds查看结果'）.show（）；
$（'.showanswer'）.hide（）；
$（'.pds问题'）。附加（''）；
$（'.hideanswer'）。在（'click'，函数（）{
$（'.pds vote'）.hide（）；
$（'.pds answer'）.hide（）；
$（'.pds投票按钮'）.hide（）；
$（'.pds查看结果'）.hide（）；
$（'.showanswer'）.show（）；
$（'.hideanswer'）.hide（）；
});
});
});

polldddy不会隐藏按钮，而是会替换

\PDI\u container5968383

的

.innerHTML

，从而完全删除新按钮。查看PD脚本中的函数

PDV_go5968383（）

：

function PDV_go5968383(){
    /* other code */
    // PDV_html5968383 is prepared HTML for the container
    _$("PDI_container5968383").innerHTML = PDV_html5968383;
    /* other code */
}

---

这将删除所有添加的内容。您可以在PD容器外添加按钮，并使用CSS定位它们。这将阻止删除它们。

当用户单击返回问题时，可以使用事件委派重新附加按钮：

$('body').on('click', '.pds-return-poll', function() {
    setTimeout(function(){
        $('.pds-question').append('<input type="button" class="showhideanswer" value="Hide Options"/>');
    }, 10);
});

$（'body'）。在（'click'，'pds return poll'，function（）上{
setTimeout（函数（）{
$（'.pds问题'）。附加（''）；
}, 10);
});

我也干涸了你的代码，只是有一点：

$(document).ready(function() {
    $('.pds-answer, .pds-vote').css('display' , 'none');
    $('.pds-question').append('<input type="button" class="showhideanswer" value="Show Options"/>');

    $('body').on('click', '.pds-return-poll', function() {
        setTimeout(function(){
            $('.pds-question').append('<input type="button" class="showhideanswer" value="Hide Options"/>');
        }, 10);
    }).on('click', '.showhideanswer', function() {
        $('.pds-answer, .pds-vote').toggle();
        if (this.value == 'Show Options')
            $(this).val('Hide Options');
        else
            $(this).val('Show Options');
    });
});

$（文档）.ready（函数（）{
$（'.pds-answer，.pds-vote'）.css（'display'，'none'）；
$（'.pds问题'）。附加（''）；
$（'body'）。在（'click'，'pds return poll'，function（）上{
setTimeout（函数（）{
$（'.pds问题'）。附加（''）；
}, 10);
}).on（'click'，'showhideanswer'，函数（）{
$（'.pds-answer，.pds-vote'）.toggle（）；
如果（this.value==“显示选项”）
$（this.val（'Hide Options'）；
其他的
$（this.val（'Show Options'）；
});
});

超时是因为默认函数优先，所以将此超时解释为延迟对象

显然，由于按钮是动态添加的，它还需要事件委派，正如我在上面的代码中所述（或者重新绑定事件处理程序，由您选择）

​编辑：修复了Firefox中的一个bug

---

edit2:把它再干一点。选择器现在只使用了一次，所以我放弃了选择器缓存，作为

$（文档）。ready

的选择器不能在

showhideanswer

的

单击
处理程序中重复使用，因为出于某种原因，插件的开发人员决定在您转到结果页面并返回投票页面时创建新元素，而不是重复使用相同的元素。
代码看起来湿淋淋的。。。我相信，如果使用共享类并缓存选择器，您可以将所有这些减少到5行左右。
.css（'display'，'none'）===.hide（）
，即使没有共享类，您也可以将所有这些选择器连接到一个单独的选择器：
$（'.pds-vote，.pds-answer，.pds-vote-button，.pds-view-results'））
不确定使用外部脚本是否是最好的方法，但您是否看到Polldady有一个开放的API？如果它适合你的需要，那么它可能更可靠…@Dmitry Pashkevich我同意，这不是最好的主意，但我在这方面别无选择case@Fabrício Matté在.css上选择而不是使用.hide（）要快得多，这就是我为什么不使用.hide的原因
$(document).ready(function() {
    $('.pds-answer, .pds-vote').css('display' , 'none');
    $('.pds-question').append('<input type="button" class="showhideanswer" value="Show Options"/>');

    $('body').on('click', '.pds-return-poll', function() {
        setTimeout(function(){
            $('.pds-question').append('<input type="button" class="showhideanswer" value="Hide Options"/>');
        }, 10);
    }).on('click', '.showhideanswer', function() {
        $('.pds-answer, .pds-vote').toggle();
        if (this.value == 'Show Options')
            $(this).val('Hide Options');
        else
            $(this).val('Show Options');
    });
});