jQuery isn't working between <li></li>

Question

I wrote a simple script that copies text to clipboard using zClip library http://www.steamdev.com/zclip/.

<ul>
 <!-- Iterates trough a list of items -->
  <li>

    <script type="text/javascript">
        $(document).ready(function($){
            $('#cpbtn${id}').zclip({
                path:'resources/zclip/ZeroClipboard.swf',
                copy:function(){return $('#cptext${id}').val();}
            });
        });
    </script>

    <input type="hidden" value="userfiles/images/${imageName}" id="cptext${id}"/>
    <a class="btn btn-primary cpbtn" id="cpbtn${id}">Copy URL</a>

  </li>
 <!-- End of iterator -->
</ul>

But it isn't working between <ul><li></li></ul> tags, if I remove the <ul><li></li></ul>, it's working. I put it between tags cause it iterates trough a list of items, I tried to put the zClip method out of <ul><li></li></ul> but I don't know how to trigger .zclip(); method. What is wrong? Where I messed up?

Answer 1

There was a problem with position of zClip generated element.

I've put <a class="btn btn-primary cpbtn" id="cpbtn${id}">Copy URL</a> in a <div style="position: relative;"></div> and it's working now.

Answer 2

Try this:

$('ul li').find('a').each(function() {
    // cache jquery var
    var current = $(this);

    current.zclip({
        path: 'resources/zclip/ZeroClipboard.swf',
        copy: function() {
            return current.prev().val();
        }
    });
});​

Put this zClip method out of <ul><li></li></ul> and call it once only.