js动态追加的元素如何触发事件

时间 2019-11-10

原文原文链接

通常经过js或者jQuery动态添加的元素标签，经过该元素标签、class、id触发事件，是无效的。以下所示：html

<body>
<input type="text" class="ceshi" />
<input type="text" class="ceshi" />
<input type="text" class="ceshi" />
<button onclick="addLine();">点击添加</button>

<script>
    function addLine() {
        var html = "<input type='text' class='ceshi' />";
        $('.ceshi:last').after(html);
    }
    $(".ceshi").on('focus', function () {
        $(this).val(111);
    });
</script>
</body>

在既有的<input>后面再经过按钮点击事件，在js中动态添加一个<input>元素，咱们经过页面操做能够发现，既有的元素聚焦后输入框内会添加“111”，而js添加的第四个输入框元素，聚焦后并不会触发focus事件。如图所示：函数

若是想要触发新标签的事件，解决方法有两种：this

（1）在标签内添加事件触发方法，例如：<a onclick="test();"></a>spa

<body>
<input type="text" class="ceshi" onfocus="test(this);"/>
<input type="text" class="ceshi" onfocus="test(this);"/>
<input type="text" class="ceshi" onfocus="test(this);"/>
<button onclick="addLine();">点击添加</button>

<script>
function addLine() {
var html = "<input type='text' class='ceshi' onfocus='test(this);'/>";
$('.ceshi:last').after(html);
}

function test(param) {
$(param).val(111);
}
//$(".ceshi").on('focus', function () {
// $(this).val(111);
//});
</script>
</body>

效果如图所示，聚焦到第四个动态添加的输入框时，可触发聚焦事件。3d

（2）调用jQuery的delegate函数，delegate函数能够根据特定的根元素，把一个或者多个事件注册到指定的元素上，不论这个元素如今是否存在。code

<body>
<input type="text" class="ceshi"/>
<input type="text" class="ceshi"/>
<input type="text" class="ceshi"/>
<button onclick="addLine();">点击添加</button>

<script>
    function addLine() {
        var html = "<input type='text' class='ceshi'/>";
        $('.ceshi:last').after(html);
    }
    $(function () {
        $("body").delegate("input",
            "focus",
            function () {
                $(this).val(111);
            });
    });

    //function test(param) {
    //    $(param).val(111);
    //}

    //$(".ceshi").on('focus', function () {
    //    $(this).val(111);
    //});
</script>
</body>

效果图和方法（1）是一致，再也不赘现。htm

使用此方法时，若是须要屡次变动绑定的事件，须要先解除绑定后才能再次绑定事件，解除绑定的方法：blog

$("body").undelegate();

以上就是两种解决动态添加标签的事件绑定方法啦，感谢阅读！事件

/******************************我是可爱的分割线**********************************/ip