Question

我需要什么：

我正在尝试点击按钮创建标记。我成功尝试在点击上创建div。

问题：

正如在所有已经看过的网站中一样，例如在堆栈溢出或编写电子邮件地址时，当您完成文本的标记时，＃34;标记＆＃34;形成一个＆＃34;删除＆＃34;悬停时按钮。

现在我想要这样的东西，但我对如何在div上显示十字架感到困惑。

另外我的问题是当我使用元素时，我也提供一些背景颜色，但这是静态的。如果文本增长，则文本部分没有背景颜色。

我应该怎么解决这个问题？

这是我到目前为止所尝试的：http://jsfiddle.net/abhighosh18/wk9uxfz5/1/

JS：

library(ggplot2)
library(reshape2)
library(dplyr)
dta2 <- dta %>% melt %>%
                group_by(Var2, value) %>%
                summarise(count = n( )/nrow(dta))
ggplot(dta2, aes(x = Var2, fill = factor(value), y = count)) + 
       geom_bar(stat = "identity", width = 1, colour = "black")

Answer 1

一些照明 -

$('#newCo').on('click',function(){ $(this).remove(); });

上述操作无效，因为行执行时#newCo元素不存在。

$(document).on('click','#newCo',function(){ $(this).remove(); });

这个重构的代码行侦听文档，并且将处理首次加载DOM时不存在的元素。但是，ID不是您想要在这里使用的...因为ID需要是唯一的，如果单击.btnAdd元素，很快就会有几个具有相同ID的div。

有很多方法可以实现你想要的，我只是想说明你的方法失败的原因。

FIX：您可以在创建div的单击函数（在.appendTo（）之前）中链接.addClass("removable-tag")，并听取$(document).on('click','.removable-tag',function(){...});，然后按预期运行。

Answer 2

您可以使用display：inline-block css属性和min-width而不是width：

$('.btnAdd').on('click', function () {
    $('<div/>', {
        id: 'newCo',
        title: $("#prodName").val(),
        text: $("#prodName").val()
    }).css({
        fontWeight: 700,
        minWidth : '30px',
        background : 'lightblue',
        padding: '2px',
        margin: '5px',
        display: 'inline-block'
    }).appendTo("#content");
});

http://jsfiddle.net/Lathtqd8/

Answer 3

注意：以下是对这部分问题的回答（更新前）：

现在我需要的是并排放置div的CSS。一世   已经看到了这样做的代码，但我需要知道如何编写   动态生成的div的代码。

我尝试的另一件事是创建按钮而不是div。那   将我的按钮并排放置，而无需CSS的任何额外工作。

将此添加到您的css：

#newCo { float: left; }

并从JS代码中删除强制width : '30px',，否则会破坏大型内容。

http://jsfiddle.net/tunecino/wk9uxfz5/5/

Answer 4

如果要添加多个元素，请添加一些非id的类。

摘录

- 喜悦

＆＃13;

//javascript
$('.btnAdd').on('click', function () {
    $('<div/>', {
        class: 'newCo',
        title: $("#prodName").val(),
        text: $("#prodName").val(),
        'data-idn':'some_unique_number'
    }).append('<a>x</a>')
      .appendTo("#content")
    .find('a').click(function(){
        var idn = $(this).parent().data('idn');
        $(this).parent().remove();
        //removeCallback(idn); //call anything with idn if required
    });
});

＆＃13;

/*CSS*/
.newCo{float:left;min-width:30px;background:lightblue;font-weight:700;padding:2px;margin:5px;}
.newCo > a {cursor:pointer;margin:0 0 0 3px;border-radius:50%;color:red;padding:0;text-shadow:0px 0px 1px #fff;font-weight:200;font-size:16px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Product Name:<input id="prodName" type="text">

<button class="btnAdd" value="Click Me!">Add Product</button>

<br/><br/><br/><div id="content" height="100px" width="100px" style="color:blue"></div>

＆＃13;

Answer 5

试试这个：

$("#mydiv").off('click');

单击jQuery删除div元素不起作用

我需要什么：

问题：

5 个答案: