Кнопка jQuery. Удалите, нажав значок

Question

Im, используя кнопку jQuery ui, чтобы создать динамики, которые выглядят как кнопки динамически. Нажатие на эти divs должно открыть диалог, и щелчок по его значку должен удалить кнопку div(). Ive пробовал несколько разных подходов, но я не могу получить результат, который я хочу.

Ближайшая вещь, достигнутая Ive, заключается в использовании onclick на значке & на самом div, но проблема в том, что при нажатии на значок я сначала вызываю значок onclick, а затем вызывает call onclick, что приведет к диалоговое окно для открытия после удаления div. Ive также попытался добавить свойство disable и установить его в true на div внутри значка onclick и проверить его внутри 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"); 
} 

Ps. Причина, по которой Ive использовала кнопку, состоит в том, что виджет больше всего похож на то, что я хочу в 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"); 
} 

Answer 1

Я предполагаю, что значок является дочерним элементом кнопки дел. Когда нажимается значок, вам необходимо остановить пузырек-событие в родительском div. Вы можете сделать это с event.stopPropagation()

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