Question

In below code when I click ‘Vote’ a vote results screen is displayed but when I click ‘Return to poll’ the poll is redisplayed but the button ‘Show Options’ is no longer visible. Is there a way to prevent this button from being hidden when a ‘Return to poll’ is clicked.

Here is the fiddle : http://jsfiddle.net/E2gku/2/

<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

You can use event delegation to re-append the button when the user clicks to go back to the question:

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

I’ve also dried up your code, just a little:

$(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.

The timeout is because your default function takes precedence, so interpret this timeout as a deferred object.

And obviously, as the button is being added dynamically, it will also require event delegation as in my code above (either that or re-binding the event handlers, your choice).

​edit: Fixed a bug in Firefox.

edit2: Dried it up a little more. Selectors are only being used once now so I discarded the selector caching, as the $(document).ready‘s selector can’t be re-used inside the showhideanswer‘s click handler because, for some reason, your plugin’s developer decided to create new elements when you go to the results page and back to the vote page instead of re-using the same elements.