Bootstrap Popup - присоединить событие к кнопке для popover динамически

Question

Я намерен использовать модуль Bootstrap Popover в качестве подтверждения для события удаления, так что при нажатии на кнопку <button> вместо простого запуска функции открывается всплывающее окно, которое позволяет пользователь подтвердить или увольнять действие.

Следует отметить, что среда представляет собой построенный в однопользовательском режиме веб-приложение с одной страницей ~ mvc, где элементы добавляются динамически (я, таким образом, заранее не знаю количество элементов и не могу жестко указать действия для каждого элемента)

---

в текущей ситуации (без пирога) я сделать что-то похожее на это, чтобы вызвать прямое (без конформации) действия:

$view.on('click', '.deleteButton', function() { 
    var id = $(this).attr('data-id'); 
    api.delete('someUrl' + id, successFunction); 
}): 

Если кнопка будет есть arkup похож на это:

<button class="deleteButton" data-id="2">Delete me!</button> 

---

Однако теперь я хотел бы добавить шаг подтверждения (например, «Вы уверены, что хотите удалить эту великолепную кнопку? (Y/N)») и подумали о том, как использовать bootstrap popover.

После мозгового штурма, то, что я придумал, было такой стратегией, как следующее. Это не оптимальное решение (оптимальным решением было бы расширить модуль popover, чтобы я мог передать подтверждениеFunction и cancelFunction для popover).

Во-первых, я должен был бы инициировать popovers.

$view.find('.deleteButton').popover({ 
    title: 'Are you sure?', //Example title 
    html: true, //Essential for the html to work as expected 
    selector: '.deleteButton', //Allow ajaxing in of new elements 
    container: '.viewName', //So that the popovers reside w/in the current view and thus can be bound to $view (a jQuery object for the view) 
    content: [...], //Two <button>s with a specified class, e.g. .viewName__deleteButton--popover 
}); 

Во-вторых, я хотел бы связать событие с кнопками внутри пирог

$view.on('click', '.viewName__deleteButton--popover', function() { 
    var id = ??; // Here comes the troubling part - how do I get the ID of the clicked button? How can I target the original button? If I can do that, I think it would solve everything. 
    api.delete('someUrl' + id, successFunction); 
}); 

Проблема, которая возникает это как таргетинг изначально нажал кнопку?

Единственный soultion, который я могу придумать, что не очень аккуратно на все, чтобы сделать что-то вроде этого:

var popoverId = $(this).parents('.popover').attr('id'); //returns popoverXXXXXX 
var parentElement = $view.find('[aria-describedBy="' + popoverId + '"]'); 

Это работает, но это очень грязное решение и не чувствую себя «хорошо».

Есть ли способ сделать это более аккуратно? Предпочтительно я мог бы определить общую функцию, такую ​​как $element.confirmationPopover({popoverSettings...}, confirmationFunction, declineFunction);, которая может использоваться в нескольких случаях.

(PS: Я не мог понять, краткое название для этого Q, советы, как всегда ценится)

Answer 1

Я решил, создав расширение для JQuery, так что:

$.fn.confirmationPopover = function (passedInOptions) { 
    var $view = this; 

    var defaultOptions = { 
    confirmationLabel: 'Yes', 
    container: '.' + this.attr('class'), 
    declineLabel: 'No', 
    html: true, 
    placement: 'left', //top | left | right | bottom 
    rowClasses: false 
    }; 

    if (!passedInOptions.declineClass) { 
    passedInOptions.declineClass = passedInOptions.selector + '__popover__decline'; 
    } 

    var obj = {}; //Merged options 
    $.extend(true, obj, defaultOptions, passedInOptions); 

    var popoverContent = '<div class="row ' + (obj.rowClasses ? obj.rowClasses : 'tac') + '">' + 
         '<button class="button button--small ' + obj.confirmationClass + '">' + obj.confirmationLabel + '</button>' + 
         '<button class="button button--small button--outline ' + obj.declineClass + '">' + obj.declineLabel + '</button>' + 
         '</div>'; 

    if (!obj.content) { 
    obj.content = popoverContent; 
    } 

    /* Initiate Popover */ 
    $view.popover(obj); 

    /** 
    * Bind confirmation Button 
    */ 
    $view.on('click', '.' + obj.confirmationClass, function() { 
    var popoverId = $(this).parents('.popover').attr('id'); 
    var $this = $view.find('[aria-describedBy="' + popoverId + '"]'); 
    obj.confirmationFunction($this); 
    }); 

    /** 
    * Bind decline button 
    */ 
    $view.on('click', '.' + obj.declineClass, function() { 
    var popoverId = $(this).parents('.popover').attr('id'); 
    var $this = $view.find('[aria-describedBy="' + popoverId + '"]'); 
    if (typeof obj.declineFunction === 'function') { 
     obj.declineFunction($this); 
    } else { 
     $this.popover('hide'); 
    } 
    }); 

    return this; 
}; 

Answer 2

Вы также можете использовать popoverX! , Это немного модально-иш-версия всплывающих ботстрапов.