Jquery 如何找到子div win在使用鼠标的父级中，div只有一个类名

对不起，如果这是已经被问到，但我无法找到确切的解决方案，我需要

我是jquery的noob，正在制作报纸版面表单。使用此代码，我可以在布局画布中创建新div，而不会出现问题

function makeSplashBlockdiv() {
    $("#canvas").append('<div class="SplashBlock" class="bar">Splash Block 700X250</div>')
    $(".SplashBlock").draggable({
        containment: "#canvas",
        scroll: false,
        grid: [10, 10]
    }, {
        cursor: "move",
        cursorAt: {
            top: 125,
            left: 350
        }
    })
}​

我知道应该有一个点击处理程序，但我还没有弄明白这一部分

---

任何帮助都将不胜感激。

将单击事件绑定到div类，而不是保存它们的画布

e、 g

这样，您就可以使用

$（this）

访问单击的div并将其删除

e、 g

---

您有几个选择：

1） 用于

事件。目标

：

$("#canvas").click(function(event) {
    var theDiv = $(event.target).closest('div');
    // ...
});

这将找到鼠标单击的div<代码>最近的从集合中的元素开始，查找与选择器匹配的第一个元素，根据需要通过父元素进行处理

2） 或者，您也可以让jQuery为您这样做，通过以下方式更改

单击
处理程序以显式使用事件委派：

在较新版本的jQuery中，您可以改为使用（注意参数更改的顺序）

…虽然我个人更喜欢
委托的清晰性
，但以下内容将为所有单击的div添加一个
选定的
类

function makeSplashBlockdiv() {
    var $myNewDiv = $('<div class="SplashBlock" class="bar">Splash Block 700X250</div>');

    $myNewDiv.click(function () {
        $(this).addClass("selected");
    });

    $("#canvas").append($myNewDiv);

    $(".SplashBlock").draggable({
        containment: "#canvas",
        scroll: false,
        grid: [10, 10]
    }, {
        cursor: "move",
        cursorAt: {
            top: 125,
            left: 350
        }
    });
}​

函数makeSplashBlockdiv（）{
变量$myNewDiv=$（'Splash Block 700X250'）；
$myNewDiv.单击（函数（）{
$（此）.addClass（“选定”）；
});
$（“#画布”）.append（$myNewDiv）；
$（“.SplashBlock”）.draggable({
遏制：“画布”，
卷轴：错，
网格：[10,10]
}, {
光标：“移动”，
库索拉特：{
排名：125，
左：350
}
});
}​

然后，您可以通过
$（“#canvas.selected”）
将单击事件绑定到div的类，而不是保存它们的画布，来操作所有选定的div。通过这种方式，您可以使用
$（this）
访问单击的div并将其删除（例如
$（this）.remove（）
）我得到了它，问题是我没有将jquery放在画布中，更好的做法是做OP已经在做的事情（事件委派）。我只是这样做，它不起作用。我应该将此代码放在哪里？将其放入
$（document）.ready（）
函数中。只要确保您的
div
s实际拥有我调用的类
。divclass
我得到了它，问题是我没有将jquery放在画布中，谢谢您的帮助。我将上面的代码放在标记后面。这是我插入的代码的剪切粘贴$（#canvas”）。单击（函数（事件）{var theDiv=$（event.target）。最近（'div'）；警报（“div为“+theDiv”）；}）；当我点击一个按钮时，我没有看到任何输出div@Chris：“我将上面的代码放在标记后面。”然后，当代码运行时，您的元素（具有
id
“canvas”
）将不存在，因此代码无法在其上设置事件处理程序。要么将
脚本
元素移动到文档末尾，就在关闭的
标记的上方，要么使用jQuery的功能（但是如果您控制脚本标记在文档上的位置，就不需要使用
就绪
）。谢谢你的帮助。
$(".divclass").click(function(){
   $(this).remove()
});

$("#canvas").click(function(event) {
    var theDiv = $(event.target).closest('div');
    // ...
});

$("#canvas").delegate("div", "click", function(event) {
    var theDiv = $(this);
    // ...
});

$("#canvas").on("click", "div", function(event) {
    var theDiv = $(this);
    // ...
});

function makeSplashBlockdiv() {
    var $myNewDiv = $('<div class="SplashBlock" class="bar">Splash Block 700X250</div>');

    $myNewDiv.click(function () {
        $(this).addClass("selected");
    });

    $("#canvas").append($myNewDiv);

    $(".SplashBlock").draggable({
        containment: "#canvas",
        scroll: false,
        grid: [10, 10]
    }, {
        cursor: "move",
        cursorAt: {
            top: 125,
            left: 350
        }
    });
}​