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>