技術標籤：雜敘ajaxJavaScriptjqueryjsajax

問題描述：

當利用ajax技術動態建立元素時，jQuery無法獲取到元素

①建立元素

ajax程式碼：

$.ajax({
    url: '/users/getdata',
    method: 'post',
    dataType: 'json',
    success: function(data) {
        let temp = '';
        console.log(data);
        // 遍歷data資料
        for (var k = 0; k < data.length;
 
 k++) {
            console.log(data[k][0].author);
            temp += '<div class=" row col-12 messages"><div class="col-12 messagebox left"><span class="username">';
            temp = temp + data[k][0].author + '</span>';
            temp = temp +
 
 '<span class="datetime">' + data[k][0].time + '</span>';
            temp = temp + '<span class="usericon"></span><span class="messagedelete">刪除</span></div>';
            temp = temp + '<div class="col-12"><span class="message">'
 
 + data[k][0].content + '</span></div>';
            for (var i in data[k]) {
                if (i == 0)
                    continue;
                else {
                    console.log(data[k][i]);
                    temp = temp + '<div class="col-12 feedbacmessage"><span class="feedbackName">' + data[k][i].author + '</span><span feedBackMessage>:  ';
                    temp = temp + data[k][i].content + '</span><span class="feedbackdelete">刪除</span></div>'
                }
            }
            temp += '<div class="col-4 feedbackinput"><form action="/users/submitfeedBackMessage" method="POST">';
            temp += '<textarea class="feedbackwords" name="feedbackword" id="feedbackwords" cols="60" rows="1" placeholder="我也說一句"></textarea>';
            temp += "<input type='text' name='tablename' value='" + data[k][0].tableName + "'style='display: none;'>";
            temp += '<button type="submit" class="btn btn-success mr-2">提交</button><button type="reset" class="btn btn-light">重置</button>';
            temp += '</form></div></div>';
        }
        $('.messagecontent').html(temp);
    }
});

jquery程式碼：

    $(function() {
            $('.feedbackwords').on('focus', function() {
                console.log('up');
                $(this).css('border', '1px solid #ccc');
                $(this).attr('rows', '2');
                $(this).parent().children('button').show();
            });
            $('.feedbackwords').mouseover(function() {
                $(this).css('border', '1px solid orange');
            });
            $('.feedbackwords').blur(function() {
                $(this).css('border', '1px solid #ccc');
                $(this).attr('rows', '1');
                $(this).parent().children('button').hide();
            });
            $('.feedbackwords').mouseout(function() {
                $(this).css('border', '1px solid #ccc');
            });
            console.log($('.feedbackwords'));
            console.log('down');

        });

②頁面顯示元素沒有獲取

函式沒有實現

解決辦法

在網上查閱資料後發現動態新增的標籤要事件委託才能獲取到節點
修改程式碼如下：

    $(function() {
        $('.messagecontent').on('mouseenter', function() {
            $('.feedbackwords').on('focus', function() {
                console.log('up');
                $(this).css('border', '1px solid #ccc');
                $(this).attr('rows', '2');
                $(this).parent().children('button').show();
            });
            $('.feedbackwords').mouseover(function() {
                $(this).css('border', '1px solid orange');
            });
            $('.feedbackwords').blur(function() {
                $(this).css('border', '1px solid #ccc');
                $(this).attr('rows', '1');
                $(this).parent().children('button').hide();
            });
            $('.feedbackwords').mouseout(function() {
                $(this).css('border', '1px solid #ccc');
            });
            console.log($('.feedbackwords'));
            console.log('down');
        });
    });

結果如下所示