Завершить загрузку в фактическом popover?

Question

Я использую Twitter Bootstrap popover для своего рода подтверждения оповещения для удаления определенных строк таблицы и, похоже, не может заставить кнопки внутри popover влиять на что-либо. Я скопировал точную кнопку «Отмена» за пределами popover, и она отлично работает. http://jsfiddle.net/UK7BE/1/

HTML

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete' 
      data-content=" 
      <div style='font-size: 14px; color: #000000; font-weight:bold'> 
       <span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row?<br/><br/> 
      </div> 
      <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp;<input type='button' value='Delete' class='greenBtn' id='delete' /> 
      " title="Delete"></span>&nbsp; 

JQuery

$('.delPop').popover({ 
       placement:'bottom', 
       html : true, 
      }); 
      $("input[type=button].cancelPop").on('click',function(){ 
      $(".delPop").popover('hide'); 
      }); 

Любые идеи? Заранее спасибо.

Answer 1

Проблема заключается в том, что при использовании bootstrap popover с содержимым html он фактически клонирует контент в data-content внутри div. Таким образом, это означает, что зарегистрированное событие o первоначальное отмена не применяется в новой кнопке отмены, созданной в popover, так как это содержимое data-content - это просто значения атрибутов, а не действительный элемент в DOM. Таким образом, вы можете использовать делегирование делегирования для привязки события click к документу (так как он находится на корневом уровне), чтобы он делегировал кнопку отмены.

$(document).on('click',"input[type=button].cancelPop", function() { 
    $(".delPop").popover('hide'); 
}); 

fiddle

Но держись. Таким образом, вам не нужно размещать контент popover. Вместо этого вы можете разместить html как на странице, скрывающей их.

Еще лучше: отделите содержимое от другого скрытого элемента, а не помещайте весь html в атрибут.

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete'></span> &nbsp; 
<div class="popOverContent"> 
    <div style='font-size: 14px; color: #000000; font-weight:bold'> 
<span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row? 
     <br/> 
     <br/> 
    </div> 
    <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp; 
    <input type='button' value='Delete' class='greenBtn' id='delete' /> 
</div> 

и применять:

$(function() { 
    $(document).on('click', "input[type=button].cancelPop", function() { 
     $(".delPop").popover('hide'); 
    }); 

    $('.delPop').popover({ 
     placement: 'bottom', 
     html: true, 
     content: function() { 
      return $('.popOverContent').html(); 
     } 
    }); 

}); 

Fiddle