Question

点击div后，我正在创建button个元素。生成的div是draggable和resizable。

在点击相同的动态生成的div时，应该出现一个文本框，其中我放置了一些文本，然后相同的文本应该附加里面那个div。

但不知何故div上的click事件未注册。有任何想法吗？

jQuery的：

$(".square").click(function () {
    alert("square clicked");
    $(".box").append("<div class='comp1'></div>");
    $(".box .comp1").resizable({
        containment: ".box"
    });
    $(".box .comp1").draggable({
        containment: ".box"
    });
});

$(".circle").click(function () {
    $(".box").append("<div class='comp2'></div>");
    $(".box .comp2").resizable({
        containment: ".box"
    });
    $(".box .comp2").draggable({
        containment: ".box"
    });
});

//script to append text
$(".comp1").click(function () {
    var obj = $(this);
    alert(1);

    $(".btnSaveTitle").click(function () {
        alert("save title clicked");
        alert($(".componentTitle").val());
        var title1 = $(".componentTitle").val();
        obj.append(title1);
    });
});

HTML：

<button type="button" class="btn btn-success square">Table</button>
<button type="button" class="btn btn-primary circle">Round Table</button>
<button type="button" class="btn btn-primary square">Stage</button>
<button type="button" class="btn btn-info pull-right btnSaveTitle">Save</button>
<input type="text" class="componentTitle pull-right" placeholder="name your component" />
<br />
<div class="row">
    <div class="box" style="border: double; height: 500px; position:relative ; width: 100%"></div>
</div>
</div>

JSFiddle

Answer 1

您必须为新创建的元素使用事件委派。

此外，您不应在另一个click处理程序中注册click事件处理程序。

// declare obj variable outside of the click handler:
var obj;
// delegate click event:
$(document).on('click', ".comp1", function () {
    // point the obj variable to the clicked element
    obj = $(this);
    alert(1);
});

// move click handler outside:
$(".btnSaveTitle").click(function () {
    // check whether the obj variable isn't undefined:
    if(obj !== undefined){
        alert("save title clicked");
        alert($(".componentTitle").val());
        var title1 = $(".componentTitle").val();
        obj.append(title1);
    }
});

JSFiddle

通过jquery无法正常将文本附加到动态生成的Div

1 个答案: