Twitter Bootstrap uyarı mesajı kapanır ve tekrar açılır

Uyarı mesajlarıyla ilgili bir sorunum var. Normal olarak görüntüleniyor ve kullanıcı x(kapat) düğmesine bastığında kapatabiliyorum, ancak kullanıcı tekrar görüntülemeye çalıştığında (örneğin, düğme olayına tıkladığında) gösterilmiyor. (Ayrıca, bu uyarı mesajını konsola yazdırırsam, eşittir [].) Kodum burada:

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

Ve olay:

 $(".alert").show();

PS! Uyarı mesajını yalnızca bir olay gerçekleştikten sonra göstermem gerekiyor (örneğin, düğme tıklandığında). Ya da neyi yanlış yapıyorum?

Data-dismiss, öğeyi tamamen kaldırır. Bunun yerine jQuery'nin .hide () yöntemini kullanın.

Hızlı düzeltme yöntemi:

Öğeyi gizlemek için satır içi javascript kullanma onclick şu şekilde:

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNFL/

Bununla birlikte, bu yalnızca tembelseniz kullanılmalıdır (bakımı yapılabilen bir uygulama istiyorsanız bu iyi bir şey değildir).

Doğru yapma yöntemi:

Bir öğeyi gizlemek için yeni bir veri özelliği oluşturun.

Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

ve sonra biçimlendirmede data-dismiss'i data-hide olarak değiştirin. Jsfiddle'daki örnek .

$("." + $(this).attr("data-hide")).hide()

Bu, data-hide'de belirtilen sınıfa sahip tüm öğeleri gizler, yani: data-hide="alert"uyarı sınıfıyla birlikte tüm öğeleri gizler.

Xeon06 alternatif bir çözüm sağladı:

$(this).closest("." + $(this).attr("data-hide")).hide()

Bu yalnızca en yakın ana öğeyi gizleyecektir. Her uyarıya benzersiz bir sınıf vermek istemiyorsanız, bu çok kullanışlıdır. Ancak, uyarının içine kapat düğmesini yerleştirmeniz gerektiğini lütfen unutmayın.

Jquery doc'tan .closest kelimesinin tanımı :

Kümedeki her bir öğe için, öğenin kendisini test ederek ve DOM ağacındaki ataları boyunca yukarı doğru ilerleyerek seçiciyle eşleşen ilk öğeyi alın.

Diyaloğu göstermek / gizlemek için bir model değişkeni kullandım ve data-dismiss="alert"

Misal:

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

benim için çalışıyor ve jquery'ye gitme ihtiyacını ortadan kaldırıyor

Bence bu soruna iyi bir yaklaşım close.bs.alert, uyarıyı kaldırmak yerine gizlemek için Bootstrap'in olay türünden yararlanmak olacaktır. Bootstrap'in bu olay türünü göstermesinin nedeni, uyarıyı DOM'den kaldırmanın varsayılan davranışının üzerine yazabilmenizdir.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

Knockout.js (kesinlikle tavsiye ederim) gibi bir MVVM kitaplığı kullanıyorsanız, bunu daha temiz bir şekilde yapabilirsiniz:

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

Bu nedenle, dinamik html sayfalarıyla baş edebilecek bir çözüm istiyorsanız, zaten eklediğiniz gibi, jQuery'nin canlı özelliğini kullanarak şu anda ve gelecekte etki alanında bulunan veya kaldırılan tüm öğeler üzerinde işleyiciyi ayarlamalısınız.

kullanırım

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

Bu benim için en iyi şekilde çalıştı:

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});

Ben de bu sorunla karşılaştım ve sadece kapat düğmesini kesmekle ilgili sorun, standart önyükleme uyarısı kapatma olaylarına hala erişime ihtiyacım olması.

Çözümüm küçük, özelleştirilebilir bir jquery eklentisi yazmaktı düzgün bir şekilde oluşturulmuş bir Bootstrap 3 uyarısı (ihtiyaç duyduğunuzda kapat düğmesi olsun veya olmasın) minimum telaşla enjekte eden ve kutu kapatıldıktan sonra kolayca yeniden oluşturmanıza olanak tanıyan .

Kullanım, testler ve örnekler için https://github.com/davesag/jquery-bs3Alert adresine bakın .

Henrik Karlsson tarafından gönderilen ve Martin Prikryl tarafından düzenlenen yanıta katılıyorum. Erişilebilirliğe dayalı bir önerim var. Sonuna .attr ("aria-hidden", "true") eklerim, böylece şöyle görünür:

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");

Yukarıdaki çözümlerin tümü, açısal veya jQuery gibi harici kitaplıkları ve Bootstrap'in eski bir sürümünü kullanır. İşte Charles Wyke-Smith'in saf JavaScript'teki çözümü Bootstrap 4'e uygulanmış . Evet, Bootstrap kendi modal ve uyarı kodu için jQuery gerektirir, ancak artık herkes kendi kodunu jQuery ile yazmaz.

Uyarının html'si şöyledir:

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

Başlangıçta uyarının gizli olduğunu ( style="display: none;") ve data-dismiss="alert"burada standart yerine kullandığımızı unutmayın data-hide="alert".

Uyarıyı gösterecek ve kapat düğmesini geçersiz kılacak JavaScript şu şekildedir:

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

Uyarıyı kodun başka bir yerinde programlı olarak gizlemek veya göstermek isterseniz, sadece yapın myAlert.style.display = 'none';veya myAlert.style.display = 'block';.

Sorun, Javascript ile uyarıyıstyle="display:none" gizlemelisiniz veya en azından gösterirken stil özniteliğini kaldırmanızdan kaynaklanmaktadır.

Diğer cevaplara ve data-dismiss'i data-hide olarak değiştirmeye dayalı olarak, bu örnek uyarıyı bir bağlantıdan açmayı ele alır ve uyarının tekrar tekrar açılıp kapanmasına izin verir

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});

Tüm yöntemleri denedim ve benim için en iyi yol, yerleşik önyükleme sınıflarını kullanmak .fadeve.in

Misal:

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

Not: jQuery'de, uyarıyı göstermek için addClass ('in'), gizlemek için removeClass ('in').

Eğlenceli gerçek: Bu, tüm öğeler için işe yarar. Sadece uyarılar değil.

İşte dayalı bir çözümdür cevap tarafından Henrik Karlsson ancak uygun olan tetikleme olayı (dayalı Bootstrap kaynaklardan ):

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

Cevap çoğunlukla benim için bir not olarak.

Bu, yalnızca ek bir "kapsayıcı" div ekleyerek ve her seferinde kaldırılan uyarıyı div'e geri ekleyerek yapılamaz mı? Benim için iş gibi görünüyor?

HTML

<div id="alert_container"></div>

JS

 $("#alert_container").html('<div id="alert"></div>');          
 $("#alert").addClass("alert alert-info  alert-dismissible");
 $("#alert").html('<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Info!</strong>message');