Solved

javascript add button

Posted on 2013-01-23
5
280 Views
Last Modified: 2013-02-07
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

0
Comment
Question by:runnerjp2005
  • 4
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38810721
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
 

Author Comment

by:runnerjp2005
ID: 38810723
I just won't fire it...

Attached is the page html
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38810730
on this link : http://jsfiddle.net/h83dP/1/
???
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38810788
Attached is the page html

Could you propose a link to your page?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38810802
an alternative is :

$("#TextBoxesGroup").on("click", ".addButton", function(evt) {
alert("ok!");
// your code here
});
0

Featured Post

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question