问题描述：

Question

到目前为止，我的代码显示了我的代码：http://jsfiddle.net/abhighosh18/dp240twL/1/

问题描述：

我在这里使用event-delegation，点击一个div我将点击的div转换为一个对象，并为用户提供一个选项，为该div提供 title 然后将该文本附加到div或完全删除该组件。

这就是我使用事件委派的方式：

var obj1, obj2;

    $(document).on('click', ".comp1", function () {
        obj1 = $(this);
        console.log('Square clicked');
        $(".componentTitle").show();
        $(".btnSaveTitle").show();
        $(".btnRemove").show();
    });

    $(document).on('click', ".comp2", function () {
        obj2 = $(this);
        console.log('Circle clicked');
        $(".componentTitle").show();
        $(".btnSaveTitle").show();
        $(".btnRemove").show();
    });

现在 问题是， 我这里有两个形状：Square和Circle。现在事件正确地为Circle激发 - 文本成功追加。现在，当我单击方块并为其保存标题时，文本仅附加到圆圈。

这就是我将文字附加到组件的方式：

 $(".btnSaveTitle").click(function () {
        var title1 = $(".componentTitle").val();

        if (obj1 !== undefined) {
            obj1.find(".label1 center").html(title1);
            obj1.attr("title", title1);
        }

        if (obj2 !== undefined) {
            obj2.append("<center>" + title1 + "</center>");
            obj2.attr("title", title1);
        }

        $(".btnRemove").hide();
        $(".componentTitle").hide();
        $(".btnSaveTitle").hide();
    });

为什么没有委托事件或为什么文本没有附加到方形组件？

注意：我正在通过$.POST保存整个活动计划的样式，并将属性输入到数据库中。

Answer 1

您需要做的一件事是，当您存储obj1

时

obj1 = $(this);
obj2 = undefined;

和

obj2 = $(this);
obj1 = undefined;

因为，你的追加代码取决于对象是什么＆＃34;未定义＆＃34;。

Answer 2

您附加到椭圆的代码是：

if (obj2 !== undefined) {
    obj2.append("<center>" + title1 + "</center>");
    obj2.attr("title", title1);
}

但是，附加到矩形的代码是：

if (obj1 !== undefined) {
    obj1.find(".label1 center").html(title1);
    obj1.attr("title", title1);
}

如果您将obj1.find()调用更改为您对椭圆代码的obj2.append()调用，则它将使用相同的功能。

如果标题发生变化，为了避免文字附加到每个元素，您可以在empty()之前append()。

obj2.children('center').remove();
obj2.append("<center>" + title1 + "</center>");

要在单击保存按钮后清除文本框，只需在按钮单击的事件处理程序中添加对val()的调用，

$(".btnSaveTitle").click(function () {
    var title1 = $(".componentTitle").val();
    $(".componentTitle").val("");

更新了小提琴：http://jsfiddle.net/dp240twL/4/

JS事件委派不适用于某些组件

问题描述：

2 个答案: