Question

我的表格中有一个＆＃34;手机＆＃34;字段和按钮＆＃34;添加另一个电话号码＆＃34;。

<div class="form-group form-inline phone">
    <label class="col-sm-2 control-label">Phone</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="phonetype1" placeholder="Type of Phone">
        <input type="text" class="form-control" id="number1" placeholder="Write here your phone number">
    </div>
</div>
<span id="newPhone"> Add a phone number</span>

当我点击此按钮时，另一组字段显示为填写另一个电话号码：

$("#newPhone").on('click',function(){
    var numItems = $('.phone').length +1;
    var newPhone=  '<div class="form-group form-inline phone">';
    newPhone+= '<label class="col-sm-2 control-label"></label>';
    newPhone+= '<div class="col-sm-10">';
    newPhone+= '<input type="text" class="form-control" id="phonetype'+numItems+'" placeholder="Type of Phone">';
    newPhone+= '<input type="text" class="form-control" id="number'+numItems+'"" placeholder="Write here your phone number">';
    newPhone+= '</div> </div>';
    $(this).before(newPhone);
});

但后来我想访问这些新字段以验证他们的数据：

$(function()
{
    $("input").on('blur',function(){
        var formElementId = $(this).attr("id");
        validateField(formElementId); //This function works, for sure
    });
});

不会对新字段执行此功能。我认为这是因为DOM树没有更新所以我的jQuery函数不知道这些新的输入字段。

即使它们不在DOM树中，我如何访问它们？如果不可能，或者它更好，我如何将我的字段插入DOM树？

谢谢大家：）

修改

再花5分钟进行研究，我已经找到了解决方案

我误用了（），这里是如何正确委派模糊事件

$("form").on('blur','input',function(){
    var formElementId = $(this).attr("id");
    validateField(formElementId); //This function works, for sure
});

Answer 1

事件委托是关键，请参阅on()文档方法

加......

由于模糊事件没有冒泡，您可以尝试使用"focusout event"

文档：

当焦点输出事件或任何元素发送到元素时在里面，失去焦点。这与模糊事件不同它支持检测后代元素的焦点丢失（换句话说，它支持事件冒泡）。

访问附加/前置元素

1 个答案: