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

Question

这是我到目前为止显示我的代码的小提琴：http://jsfiddle.net/abhighosh18/dp240twL/1/

问题描述：

我在这里使用event-delegation，在单击div 时，我将单击的 div 放入一个对象中，并为用户提供一个选项，将 title 赋予该 div，然后附加该 div将文本添加到 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();
    });

现在问题是，我这里有两种形状：方形和圆形。现在该事件为 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;

因为，您的附加代码取决于“未定义”的对象。

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() 调用，它可以使用相同的功能。

---

为避免在标题更改时将文本附加到每个元素，您可以在 append() 之前 empty() 它。

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

---

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

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

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