Как запустить событие, только когда виден определенный элемент

Question

У меня есть предупреждение div, которое появляется, когда пользователь нажимает на ссылку. Теперь я хочу скрыть это div, когда кто-то щелкает снаружи. К нему по умолчанию добавлено событие fadeoff, но я хочу, чтобы пользователь мог скрыть этот div, щелкнув в другом месте.

Я пытался поместить $('body').click в вызов функции, но она не работает. Пожалуйста, помогите, вот мой javascript

 var messageDiv = $('<div id="cannotDoDiv"></div>');
      $('body').append(messageDiv);  

      function appendDiv(this_element,msg)
      {
        var pos = this_element.offset();  
        var width = this_element.width();  
        messageDiv.css({  
          left: (pos.left - 20) + 'px',  
          top: pos.top + 30 + 'px'  
        });  
        $('#cannotDoDiv').fadeOut();
        $('#cannotDoDiv').html(msg).show().delay(1000).fadeOut();
        $('body').click(function(){
            $('#cannotDoDiv').hide();
        });
      }

    $("span#selfLike").click(function(){
        appendDiv($(this),'You cannot like your own post!');
    });

Когда я удаляю

$('body').click(function(){
    $('#cannotDoDiv').hide();
});

из моей функции $("span#selfLike").click работает нормально, в противном случае он не запускается.

Answer 1

Редактировать: Я думаю, я понял, что вы пытаетесь .. см. Обновленный код ниже, который

1. использует .one для привязки только один раз и отменяет привязку после того, как это сделано..

2. Используется при обратном вызове fadeIn, поэтому он будет связан только после того, как div виден ..

   //used call back function so it will be called only after it is 
   //completly visible
   $('#cannotDoDiv').html(msg).fadeIn("slow", function () {
   
        // below will be executed once and then unbind
        $(document).one('click', function(){  
          $('#cannotDoDiv').fadeOut();
       });
   
   });
   

Ниже приведен полный код.. Обновлено DEMO здесь

$(document).ready (function () {
  var messageDiv = $('<div id="cannotDoDiv"></div>');

  $('body').append(messageDiv);  

 function appendDiv(this_element,msg)
 {
    var pos = this_element.offset();  
    var width = this_element.width();  
    messageDiv.css({  
      left: (pos.left - 20) + 'px',  
      top: pos.top + 30 + 'px'  
    });  
    $('#cannotDoDiv').hide();

    $('#cannotDoDiv').html(msg).fadeIn("slow", function () {

         $(document).one('click', function(){
           $('#cannotDoDiv').fadeOut();
        });

    });    

    $('#cannotDoDiv').one('click', function(){
       $('#cannotDoDiv').fadeOut();
    });
 }

$("span#selfLike").click(function(event){
    appendDiv($(this),'You cannot like your own post!');
    event.stopPropagation();
  });

 });

Примечание. Оно также закрывается при нажатии на $('#cannotDoDiv') div.Если вы не хотите, чтобы это происходило, добавьте прослушиватель щелчков и stopPropogation.

Попробуйте $(document).click(function(){ вместо body.

Answer 2

Вы можете остановить распространение события click, если оно запущено на элементе div, чтобы оно не достигло document, а затем привязать обработчик события click к элементу document, которыйскрывает div:

$('#cannotDoDiv').on('click', function (event) {
    event.stopPropagation();
});
$(document).on('click', function () {
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired
});

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае аналогично использованию .bind().

Вы также можете отменить привязкуобработчик события click из document после его запуска прекращает прослушивание события, если в этом нет необходимости:

$(document).on('click.cannotDoDiv', function () {
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired
    $(this).off('click.cannotDoDiv');
});

Поскольку я использовал пространство имен для события, это не будетудалите все другие обработчики событий, прикрепленные к элементу document.Кроме того, .off() является новым в jQuery 1.7 и в этом случае совпадает с .unbind().