Question

如果朋友尝试通过点击按钮添加输入框，并在新创建的输入框中应用onfocus和onblur功能，请参阅此链接 http://jsfiddle.net/2TDZA/ 并检查下面提到的代码。主要问题是当我添加一个输入时，onfocus和onblur停止工作时将使用的脚本请帮助我们

提前致谢.. :)）

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();
    });

Answer 1

请看下面的代码：

 $('.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();
});

或者参考更新的小提琴：

Updated

Answer 2

使用jQuery事件处理程序

 $('.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 = "";
     }
 });

演示：Fiddle

Answer 3

试试这个：

 $('.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>")
    });

我删除了单引号，并在代码中添加了双引号。

使用jQuery附加输入框

3 个答案: