Question

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>
<noscript><a href="http://polldaddy.com/poll/5968383/">This is a test question ?</a></noscript>

<style>
.pds-pd-link {
display: none !important;
}
.pds-box {
    width: 200px !important;
}
.pds-input-label{
    width: auto! important;
}
.PDS_Poll{
    margin-bottom:15px;
}


</style>
<script type="text/javascript">



$(document).ready(function() {

    $('.pds-question').append('<input type="button" class="showanswer" value="Show Options"/>');

        $('.pds-vote').css('display' , 'none');
        $('.pds-answer').css('display' , 'none');
        $('.pds-vote-button').css('display' , 'none');
        $('.pds-view-results').css('display' , 'none'); 

    $('.showanswer').on('click', function () {

            $('.pds-vote').show();
             $('.pds-answer').show();
             $('.pds-vote-button').show();
             $('.pds-view-results').show();

        $('.showanswer').hide();
        $('.pds-question').append('<input type="button" class="hideanswer" value="Hide Options"/>');

        $('.hideanswer').on('click', function () {
                $('.pds-vote').hide();
                 $('.pds-answer').hide();
                 $('.pds-vote-button').hide();
                 $('.pds-view-results').hide();
                $('.showanswer').show();
                 $('.hideanswer').hide();
        });

});

});
</script>

Answer 1

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

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

JSFiddle

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

显然，当按钮被动态添加时，它也需要在上面的代码中进行事件委托（或者重新绑定事件处理程序，你的选择）。

编辑：修复了Firefox中的错误。

edit2：将它干了一点。选择器现在只被使用一次所以我放弃了选择器缓存，因为$(document).ready的{{1}}选择器不能在showhideanswer的{{1}}处理程序中重复使用，因为原因是，当您转到结果页面并返回投票页面而不是重复使用相同的元素时，您的插件开发人员决定创建新元素。

Answer 2

Polldaddy不会隐藏您的按钮，而是会替换.innerHTML的{{1}}，从而完全删除您的新按钮。看一下PD脚本中的函数#PDI_container5968383：

PDV_go5968383()

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

防止按钮永久消失

2 个答案: