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

Question

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

我是 jquery 的菜鸟，正在制作报纸版面表格。我可以使用此代码在布局画布中创建新的 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。我没有使用id，因为程序可以创建多个相同类型的div，所以id

所有这些 div 都放在一个名为 #canvas 的 div 中。

我需要能够用鼠标选择一个 div 并将其删除，我可以找到最接近的 div 与此代码但没有任何反应。

$("#canvas").click(function(event) {
    $("#log").html("clicked: " + event.target.className);

我知道应该有一个点击处理程序，但我无法弄清楚这部分。

任何帮助将不胜感激。

Answer 1

将 click 事件绑定到 div 的类，而不是绑定到包含它们的画布。

例如

$(".divclass").click(function(){});

这样您就可以使用$(this) 访问点击的 div 并将其删除

例如

$(".divclass").click(function(){
   $(this).remove()
});

Answer 2

下面会为所有点击的div添加一个selected类。

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
        }
    });
}​

然后您可以通过$("#canvas .selected") 操作所有选定的div。

Answer 3

几个选项供您选择：

1) 在event.target 上使用closest：

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

这将找到鼠标点击的 div。 closest 从集合中的元素开始，找到与选择器匹配的第一个元素，并根据需要通过父元素进行处理。

2) 或者，您可以通过 delegate 更改您的 click 处理程序以显式使用事件委托，让 jQuery 为您执行此操作：

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

在较新版本的 jQuery 中，您可以改用on（注意参数顺序的变化）；

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

...虽然我个人更喜欢delegate的清晰。