jQuery 按钮。单击图标时删除答案

【问题标题】：jQuery button. Remove when clicking iconjQuery 按钮。单击图标时删除
【发布时间】：2013-10-11 14:11:21
【问题描述】：

我正在使用 jQuery ui 按钮来动态创建看起来像按钮的 div。单击这些 div 应打开一个对话框，单击其图标应删除 div（按钮）。我尝试了几种不同的方法，但似乎无法得到我想要的结果。

我实现的最接近的事情是在图标和 div 本身上使用 onclick，但问题是，当单击图标时，我会先调用图标的 onclick，然后再调用 div 的 onclick，这将导致对话框在 div 被删除后打开。我还尝试在图标的 onclick 内的 div 上添加一个禁用属性并将其设置为 true 并检查 div 的 onclick 内的情况，但这不起作用（我有点明白为什么。）

那么我的问题是：如何创建一个按钮，当单击该按钮时会打开一个对话框，并带有一个图标，当单击该按钮时会删除该按钮？

代码：

function Add(value) {
    var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
    $("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox' onclick='ButtonClicked(this);'>" + value + "</div>");
    $("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();

    $('.SearchResultBox').button({
        icons: {
            primary: "ui-icon-circle-close"
        }
    }).delegate("span.ui-icon-circle-close", "click", function () {
        var btnId = $(this).closest("div").remove().attr("aria-controls");
        $("#" + btnId).remove();

    });

    $('.ui-icon-circle-close').attr('onclick', 'IconCloseClicked(this);');
}

function IconCloseClicked(value) {
    $(value).parent().prop("disable", "true");
    //alert($(value).parent().attr("id"));
    alert("icon");
    Remove($(value).parent());
}
function ButtonClicked(o) {
    var test = $(o).prop("disable");
    alert("div");
    if ($(o).attr("disable") == undefined) {
        Opendialog();
    }
}
function Remove(value) {
    $(value).remove();
}

function Opendialog() {
    $("#dialog").dialog("open");
}

附言。我使用按钮的原因是因为它是在 jquery ui 中看起来最像我想要的小部件。

更新（我最终得到了什么）：

function Add(value) {
    var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
    $("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox'>" + value + "</div>");
    $("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();

    $('.SearchResultBox').button({
        icons: {
            primary: "ui-icon-circle-close"
        }
    }).click(function (e) {
        Opendialog();
    });

    $('.ui-icon-circle-close').click(function (e) {
        $(this).parent().remove();
        e.stopPropagation();
    });
}

function Opendialog() {
    $("#dialog").dialog("open");
}

【问题讨论】：

如果您发布相关的 JS 和 HTML，并可能创建一个 jsFiddle，我们也许可以帮助您...
您是否尝试过 Jquery 显示/隐藏按钮？ api.jquery.com/show
我认为或者我们认为确实发布您的方法会对我们有很大帮助。这个地方是为了帮助别人不要开发你的整个程序。
我现在添加了代码，我最初没有添加代码，因为我知道我的代码很乱，并没有真正显示我的问题。所以我认为没有代码会更容易理解我的问题。生病添加我最终使用的代码，也许你明白......

标签： javascript jquery html jquery-ui jquery-ui-button

【解决方案1】：

我假设图标是按钮 div 的子元素。单击图标时，您需要停止单击事件冒泡到父 div。你可以用event.stopPropagation()来做到这一点

$('.icon').click(function(e){
    e.stopPropagation();
});

【讨论】：

是的！这正是我所追求的 :) 非常感谢。