Question

I am trying a following piece of JQuery code to add element dynamically.

Scenarios:
a) If I include the below script and jquery.min.js in it doesnt work.
b) If I add the below script in body and jquery.min.js in still it doesnt work.
c) If I add the below script in body and jquery.min.js just above the below code then it work. Why is this so?

Also I need to have jquery.min.js in head for the other functionality of joomla to work. Is it ok to add jquery.min.js in both head and in body.

I am using jQuery v@1.8.1

Please help me to understand the above scenario.

 <script type="text/javascript">
window.addEvent('domready', function() {
var count = 0;
$('p#add_field').click(function(){
count += 1;
$('#container').append(
'<strong>Link #' + count + '</strong><br />' + '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br />' );
});
});
</script> 

Below piece is the code which gets added dynamically.

<div id="container">
        <p id="add_field"><a href="#"><span>&raquo; Add your favourite links.....</span></a></p>
    </div>

Answer 1

Did you get that code from some place involving MooTools?

try wrapping in this

jQuery(document).ready(function() {
  //do stuff
})

link for your reference
http://davidwalsh.name/javascript-domready

So the result could be:

<script type="text/javascript">
    $(function() {//shorthand way of doing document.ready
        var count = 0;
        $('p#add_field').click(function(){
            count += 1;
            $('#container').append(
                '<strong>Link #' + count + '</strong><br />' + '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br />' );
        });
    });
</script>