Question

如何激活新的输入元素来绑定模糊函数？

有时我会在文档上绑定一些函数，当模糊，焦点，单击，鼠标悬停或其他操作时它会在js中执行某些操作。但是这个绑定不适用于新添加的元素，如何将函数绑定到新添加的元素？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="box">
    <input type="text" name="a" value="a" />
    <input type="text" name="b" value="b" />
</div>
<button onclick="live_blur()">live_blur</button>
<script type="text/javascript">
    $(function(){
        $('[name]').blur(function (){
            alert(this.value);
        })
    });

    function live_blur(){
        $('.box').append('<input type="text" name="c" value="c" />');
        // how to acitve new inputs when blur and alert value
    }
</script>

Answer 1

使用on功能将事件附加到document。第一个参数是事件，第二个参数指定执行事件的目标，最后一个参数是要执行的函数（事件处理程序）。

   $(document).on('blur', '[name]',function (){
        alert(this.value);
    });

JS小提琴： http://jsfiddle.net/ZWkEn/

Answer 2

您需要向新创建的元素添加事件侦听器

var input = $('<input type="text" name="c" value="c" />'); // create new <input>

$(".box").append(input); // append to your destination

input.on("blur", function () {
    console.log(this.value);
}); // register event listener

http://jsfiddle.net/zvuc6/

Answer 3

我可以向你推荐，在dyn.adding新元素之后再次初始化你的工具提示（）

如何激活新的输入元素来绑定模糊功能？

3 个答案: