jQuery按钮。单击图标时删除

时间:2013-10-11 14:11:22

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

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

我所获得的最近的事情就是在图标和图标上使用onclick。关于div本身,但问题是当点击图标时我会首先调用图标的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");
}

1 个答案:

答案 0 :(得分:1)

我假设图标是按钮div的子元素。单击该图标时,您需要停止冒泡到父div的click事件。您可以使用event.stopPropagation()

执行此操作
$('.icon').click(function(e){
    e.stopPropagation();
});