使用jQuery追加输入框答案

【问题标题】：append input box using jQuery使用jQuery追加输入框
【发布时间】：2014-01-27 11:10:12
【问题描述】：

您好朋友们试图通过单击按钮添加输入框，并在新创建的输入框上应用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>

脚本

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

【问题讨论】：

在添加输入后 onblur 和 onfocus 停止处理新添加的输入
似乎没有为动态创建的元素设置模糊和焦点。请参阅下面的 aruns 答案并修改模糊和焦点事件。
不是这样的。可以设置。这里的问题只是引号......
@FurquanKhan 不，问题还在于使用 on 委派事件

标签： jquery input append

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案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>")
    });

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

【讨论】：