Question

我有一个jQuery脚本，可以正确地从数据库中获取结果，然后以不同的跨度显示值。

<div id="userTagsContainer" name="tagsPlaceholder" data-placeholder="Keywords" contenteditable>
</div>
<div id="exist-tags">
</div>

我简化了HTML，这里是jQuery。

$(function(){
$("#userTagsContainer").on('click',function(){
    $.ajax({
        type: 'GET',
        url: 'tags.php',
        dataType: 'json',
        success: function(response){
            response = JSON.stringify(response);
            response = response.replace(/"/g,'');
            response = response.replace('[','');
            response = response.replace(']','');
            var tags = response.split(',');
            if($('#exist-tags').text().length == 0){
                for(var i=0;i<tags.length;i++){
                    $("#exist-tags").append('<span class="tag" id="tag'+i+'"></span>');
                    $('#tag'+i).html(tags[i]);
                }
            }
        },
        error: function(xhr) {
            alert("FAIL: "+xhr.status);
        }
    });
});
$("#exist-tags").on('click',function(e){
    if(e.target!=this){
        console.log(e.target);
        var clicked = (e.target).html;
        console.log(clicked);
        $("#userTagsContainer").append('<input class="tag" type="hidden" name="tagsList[]">'+clicked);
    }
});
});

在最后一部分中，我有一个包含漂亮css框中跨度的div。如果你单击其中一个跨度，它应该将其名称插入一个可编辑的div（想想hashtags）。
但是，即使console.log正确显示完整元素（包括text / html），.html方法也会返回undefined。任何想法？
编辑：如果你有一个更好的方法来获取和剥离结果，以便向用户提供纯文本，请告诉我。

Answer 1

e.target是一个vanilla javascript DOM元素，而不是jquery对象。要获取其HTML，您需要使用innerHTML：

var clicked = (e.target).innerHTML;

还有一个outerHTML通常有效，但有点不标准，特别是在旧浏览器上。

如果它是jquery对象，或者您使用$(e.target)创建了一个jquery对象，则html()方法可以使用{{3}}方法。

var clicked = $(e.target).html();

Answer 2

您可以更改click函数以利用jQuery：

[0-8]

.html返回undefined，但console.log正确显示元素

2 个答案: