javascript add button

For some reason when i click the add button it does not fire the javascript.
Any dieas why?

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function () {

    var counter = 2;

    $(".addButton").live("click", function () {



        var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.html('  Rep&nbsp;' + counter + '-' +
                        '   &nbsp;Distance:' +
                     ' &nbsp;<input name="repdist' + counter + '" type="text" id="repsit' + counter + '" style="width:30px;" /><select name="kmormile' + counter + '" id="kmormile' + counter + '">	<option value="Miles">Miles</option>	<option value="Km">Km</option></select>' +
                       ' Min: ' +
                   '  <input name="repmin' + counter + '" type="text" value="00" maxlength="2" id="repmin' + counter + '" style="width:30px;" />' +
                      '  Secs <input name="repsec' + counter + '" type="text" value="00" maxlength="2" id="repsec' + counter + '" style="width:30px;" /><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a>' +
'                      </div> <br /> ');

        newTextBoxDiv.appendTo("#TextBoxesGroup");


        counter++;
    });

    $(".removeButton").live("click", function () {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }

        counter--;

        $("#TextBoxDiv" + counter).remove();

    });

    $("#getButtonValue").click(function () {

        var msg = '';
        for (i = 1; i < counter; i++) {
            msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
        }
        alert(msg);
    });
});
  </script>

     Warmup-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input name="repdistance1" type="text" id="Text1" style="width:30px;" />
                       
                        Min: 
                     <input name="min3" type="text" value="00" maxlength="2" id="Text2" style="width:30px;" />
                        Secs 
                     <input name="sec3" type="text" value="00" maxlength="2" id="Text3" style="width:30px;" /><br /><br />
                  <div id='TextBoxesGroup'>
                        Rep1-
                          &nbsp;&nbsp;Distance:
                       &nbsp;
                      <input name="repdist1" type="text" id="repsit1" style="width:30px;" /><select name="kmormile1" id="kmormile1">	<option value="Miles">Miles</option>	<option value="Km">Km</option></select>
                        Min: 
                     <input name="repmin1" type="text" value="00" maxlength="2" id="repmin1" style="width:30px;" />
                        Secs 
                     <input name="repsec1" type="text" value="00" maxlength="2" id="repsec1" style="width:30px;" /><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a>
                      </div> <br />
                                      

Cooldown-&nbsp;

                      &nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input name="TextBox1" type="text" id="TextBox1" style="width:30px;" />
                        Min: 
                     <input name="TextBox2" type="text" value="00" maxlength="2" id="TextBox2" style="width:30px;" />
                        Secs 
                     <input name="TextBox3" type="text" value="00" maxlength="2" id="TextBox3" style="width:30px;" />

Open in new window

runnerjp2005Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
an alternative is :

$("#TextBoxesGroup").on("click", ".addButton", function(evt) {
alert("ok!");
// your code here
});
0
 
leakim971PluritechnicianCommented:
work fine for me : http://jsfiddle.net/h83dP/1/

be sure to have jquery 1.8.3 and not >1.9.x because live have been removed starting 1.9.x
Clipboard02.jpg
0
 
runnerjp2005Author Commented:
I just won't fire it...

Attached is the page html
0
 
leakim971PluritechnicianCommented:
on this link : http://jsfiddle.net/h83dP/1/
???
0
 
leakim971PluritechnicianCommented:
Attached is the page html

Could you propose a link to your page?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.