jQuery fancybox link внутри div

Question

У меня есть div, содержащий информацию. Скрестив вокруг div, у меня есть тег «a», так что, когда пользователь щелкает в любом месте div, открывается окно с фантазией.

Однако внутри div я и другая ссылка, что, когда вы нажимали вместо того, чтобы открывать причудливый бокс, он удалял весь div. Я использовал return false в событии click для удаленной работы.

Теперь мне пришлось добавить .live к клику, потому что недавно созданная элемета не получила событие click.

С тех пор, когда я нажимаю ссылку на удаление, div удаляет, но открывается окно с фантазией.

Спасибо за любую помощь.

 $(".listContent").live('mouseenter', function(){ 
     $(this).fancybox({ 
      'type':'ajax', 
      }); 
     }); 

     $("div.removeCompare").live("click", function() { 
      $(this).parents(".listingContainer").remove();           
      return false; 
     });   

Div

  <div class="listingContainer grid_9 alpha omega">      
       <a class="listContent" href="adContent.html"> 
        <div class="listingWrapper"> 
         <div class="grid_8 alpha omega"> 
         <div class="listingContent"> 
          <div class="imgHolder"> 
           <img src="imgs/cars/SearchThumb-10053325.jpg" width="100" height="75"> 
          </div> 
          <div class="descHolder"> 
           <div id="cars"></div>        
           <h3>Fancy Car</h3><div class="removeCompare">Remove</div> 
           <p>Lorem ipsum dolor sit amet, pri ex duis maiorum commune, illud viderer suscipiantur eam an. Dolorum recteque qui in. Pro inani nulla tacimates ex, qu</p> 
           <span class="listingPrice">€4,000</span> 
           <span class="listingDate">Listed: Today</span> 
           <span class="listingLocation">Co. Waterford</span> 
           <span class="listingViews">Viewed: 20 Times</span> 
          </div> 
         </div> 
        </div> 
        <div class="goTo goTo_unfocus grid_1 alpha omega"> 
         <div class="gotoWrapper"> 
           Click to View 
           <div class="imgVeiw"></div> 

          </div> 
         </div> 
        </div><!--End listingWrapper--> 
       </a> 
      </div> 

Answer 1

Обновлено: This code должно, скорее всего, работать.

$(".listContent").live('click', function(e) { 
    e.preventDefault(); 
    $(this).fancybox({ 
     'type': 'ajax' 
    }); 
    console.log('inside fancybox creator'); 
}); 

$("div.removeCompare").live('mousedown', function(e) { 
    e.stopPropagation(); 
    console.log('inside remove'); 
    $(this).parents(".listingContainer").remove(); 
}); 

Я думаю, ваша проблема была с event propagation - при нажатии на дочерний элемент соответствующее событие родителя тоже выстреливает вверх. Так что e.stopPropagation() остановит это.

Answer 2

Внутри функции событий нажмите на DIV, отвязать событие MouseEnter для внутреннего элемента (который открывает FancyBox), используя .die ('MouseEnter') обработчик события несвязывающий синтаксис.