附加到动态div的简单下拉不起作用

Question

我正在尝试下拉到动态创建的div。 但它不是让我改变价值，我认为它没有得到集中。

jquery的

$(document).ready(function () {
    wrapper = jQuery("<div />", {
        "class": "class1",
            "id": "dynamic1",
            "style": "background-color:beige; border:1px solid red;width:94%;",
            "text": "dynamically added div"
    }).appendTo($("#sample"));

    $('body').on("click", "#dynamic1", function () {
        $(this).html($("#changeUserform").html());
    });
});

我已经实施了一个示例小提示来证明我的问题。

Demo Fiddle

单击新创建的div将打开下拉列表。

Answer 1

您可以更改ON click事件并仅触发一次！

$('body').one("click", "#dynamic1", function () {

我相信它应该有用！

检查 updated fiddle

Answer 2

问题在于，每次单击下拉列表时，都会生成单击div事件。这会导致添加新的下拉列表。试试这个

$(document).ready(function () {
    wrapper = jQuery("<div />", {
        "class": "class1",
            "id": "dynamic1",
            "style": "background-color:beige; border:1px solid red;width:94%;",
            "text": "dynamically added div"
    }).appendTo($("#sample"));
  $("#sample").append($("<input/>", {
    type: "button",
    value: "add",
    id: "dynamic2"
}));

    $('body').on("click", "#dynamic2", function () {

        $("#dynamic1").html($("#changeUserform").html());
    });
});

或者您应该在第一次单击后取消绑定该事件中的click事件。使用off。

$(document).ready(function () {
    wrapper = jQuery("<div />", {
        "class": "class1",
            "id": "dynamic1",
            "style": "background-color:beige; border:1px solid red;width:94%;",
            "text": "dynamically added div"
    }).appendTo($("#sample"));

    $('body').on("click", "#dynamic1", function () {

        $("#dynamic1").html($("#changeUserform").html());
        $('body').off("click", "#dynamic1");
    });
});

Demo

Answer 3

这段代码就是问题：

$('body').on("click", "#dynamic1", function () {
        $(this).html($("#changeUserform").html());
});

每当你点击div时，你都会覆盖现有的html，这就是问题

将click事件更改为dblclick，但现在，您必须双击它。

演示：http://jsfiddle.net/AmitJoki/X2SPM/4/