Prepend JQuery Selector from .js file into .php

Question

I have a jquery plugin I am using for a slider. It contains the following code for the 'next and prev' buttons.

$(selector).prepend('\
        <ul class="mk-nav-controls">\
                <li><a id="prev" href="#" data-mk-direction="prev">Prev</a></li>\
                <li><a id="next" href="#" data-mk-direction="next">Next</a></li>\
        </ul>\
');

I am adding code into my init.js file from this jsfiddle http://jsfiddle.net/a8yJt/ so that when clicking next/prev from this slider, it will display the different divs. Right now the divs from that fiddle only work when I add:

<ul class="mk-nav-controls">
<li><a id="prev" href="#" data-mk-direction="prev">Prev</a></li>
<li><a id="next" href="#" data-mk-direction="next">Next</a></li>
</ul>

into my .php file. How can I link the Prev/Next from the slider to the code in the jsfiddle?

Answer 1

Use event-delegation on your prev and next buttons as they are getting added during run time,

$(document).on("click","#next", function(){
 //Your code
});

$(document).on("click","#prev", function(){
 //Your code
});

And in the place of document use any closest static parent of buttons next and prev to improvise the performance.

DEMO