append input box using jQuery

Question

Hi friends trying to add an input box by clicking on button and also applying onfocus and onblur functions on newly created input box for you reff plz see this link http://jsfiddle.net/2TDZA/ and also check my code mentioned below. The main problem is when i add an input the script which will be use while onfocus and onblur are stop working please help me guys

Thanks in advance.. :)

HTML

<table width="278" border="0" align="left" cellpadding="0" cellspacing="0" id="emailTable">
        <tr>
          <td width="207" align="left"><input name="" value="Enter Friend’s mobile no" type="text" onfocus="if(this.value == 'Enter Friend’s mobile no') {this.value=''}" onblur="if(this.value == ''){this.value ='Enter Friend’s mobile no'}" placeholder="Enter Friend’s mobile no" autocomplete="off"/></td>
          <td width="71" align="right" valign="top"><div class="addRow">Add</div></td>
        </tr>
      </table>

SCRIPT

 $('.addRow').click(function () {
        $('#emailTable').append("<tr><td  align='right'><input name='' value=\"Enter Friend’s mobile no\" type='text' onfocus='if(this.value == \"Enter Friend’s mobile no\") {this.value= ''}' onblur='if(this.value == ''){this.value =\"Enter Friend’s mobile no\"}' placeholder=\"Enter Friend’s mobile no\" autocomplete='off'/></td><td class='delRow'> X</td></tr>")
        })

 $(document).on("click", '.delRow', function (event) {
        $(this).parent('tr').remove();
    });

after input added onblur and onfocus stops working on newly added input — Kamal
– Kamal, Commented Jan 27, 2014 at 11:14
Looks like blur and focus are not set for dynamically created elements. See aruns answer below and modify the blur and focus events. — Milind Anantwar
– Milind Anantwar, Commented Jan 27, 2014 at 11:19
Not it's not like that. It can be set. Here the problem was simply quotes... — Furquan Khan
– Furquan Khan, Commented Jan 27, 2014 at 11:30
@FurquanKhan no the problem was also delegating event using on — Deepak Ingole
– Deepak Ingole, Commented Jan 27, 2014 at 11:36

Furquan Khan · Accepted Answer · 2014-01-27 11:29:08Z

1

Look at the code below:

 $('.addRow').click(function () {
    $('#emailTable').append("<tr><td  align='right'><input name='' value=\"Enter Friend’s mobile no\" type='text' onfocus='if(this.value == \"Enter Friend’s mobile no\") {this.value= \"\"}' onblur='if(this.value == \"\"){this.value =\"Enter Friend’s mobile no\"}' placeholder=\"Enter Friend’s mobile no\" autocomplete='off'/></td><td class='delRow'> X</td></tr>")
    })

$(document).on("click", '.delRow', function (event) {
    $(this).parent('tr').remove();
});

Or refer to the updated fiddle:

Updated

answered Jan 27, 2014 at 11:29

Furquan Khan

1,5941 gold badge15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-01-27 11:14:49Z

0

Use jQuery event handlers instead

 $('.addRow').click(function () {
     $('#emailTable').append("<tr><td  align='right'><input name='' value=\"Enter Friend’s mobile no\" type='text' placeholder=\"Enter Friend’s mobile no\" autocomplete='off'/></td><td class='delRow'> X</td></tr>")
 })

 $(document).on("click", '.delRow', function (event) {
     $(this).parent('tr').remove();
 });
 $('#emailTable').on("blur", 'input', function (event) {
     if (this.value == '') {
         this.value = "Enter Friend’s mobile no";
     }
 });

 $('#emailTable').on("focus", 'input', function (event) {
     if (this.value == 'Enter Friend’s mobile no') {
         this.value = "";
     }
 });

Demo: Fiddle

answered Jan 27, 2014 at 11:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Snehal S · Accepted Answer · 2014-01-27 11:25:11Z

0

Try this:

 $('.addRow').click(function () {
    $('#emailTable').append("<tr><td  align='right'><input name='' value=\"Enter Friend’s mobile no\" type='text' onfocus='if(this.value == \"Enter Friend’s mobile no\") {this.value= \"\"}' onblur='if(this.value == \"\"){this.value =\"Enter Friend’s mobile no\"}' placeholder=\"Enter Friend’s mobile no\" autocomplete='off'/></td><td class='delRow'> X</td></tr>")
    });

I have removed single quotes and added double quotes in your code.

answered Jan 27, 2014 at 11:25

Snehal S

8654 silver badges13 bronze badges

Collectives™ on Stack Overflow

append input box using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related