1

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

我是 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 与此代码但没有任何反应。

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

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

任何帮助都感激不尽。

4

3 回答 3

0

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

例如

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

这样你就可以$(this)用来访问点击的 div 并删除它

例如

$(".divclass").click(function(){
   $(this).remove()
});
于 2012-12-03T21:20:27.167 回答
0

几个选项供您选择：

1)closest用于event.target：

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

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

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

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

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

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

...虽然我个人更喜欢delegate.

于 2012-12-03T21:23:13.590 回答
0

以下将为selected所有单击的 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
        }
    });
}​

然后你可以通过$("#canvas .selected").

于 2012-12-03T21:25:41.000 回答