Событие JQuery не срабатывает

Question

Я создаю простую карту "html". В основном наведите указатель мыши на маркер и всплывающее окно с подробностями. В любом случае, это в основном работает нормально, за исключением того, что я хочу добавить кнопку закрытия. Прямо сейчас пользователь может щелкнуть вне всплывающего окна и закрыть его, но мне нужно добавить кнопку закрытия в углу. Однако мое закрывающее событие не срабатывает. Пока я просто пытаюсь настроить его там, где пользователь щелкает в любом месте всплывающего окна, и он закрывается. Как только у меня это получится, я применим его к стилизованному div в контейнере. Вот пример моего HTML:

<div id="container"> 
<div id="truck"><img src="eVie.png" width="637" height="280" alt="Evie" /></div> 
<div class="marker a"> 
<div class="content a inactive"><img src="solarpanel.jpg" width="240" height="205" alt="Solar Panels" /> 
    <h2>Solar Panels</h2> 
    <p>Here Comes The Sun: These solar panels capture light and heat from the sun to power exhibits when I’m out visiting around town.</p> 
</div> 
</div> 
<div class="marker b"> 
<div class="content b inactive"><img src="tailpipe.jpg" width="240" height="205" alt="Tailpipe Area" /> 
    <h2>Tailpipe Area</h2> 
    <p>No tailpipe, no fumes. That’s how I roll.</p> 
</div> 
</div> 
<div class="marker c"> 
<div class="content c inactive"><img src="plug.jpg" width="240" height="205" alt="Plug" /> 
    <h2>Plug</h2> 
    <p>Not An Ordinary Plug: Big trucks need more energy. To get all the energy I need, I have to have a bigger plug and a special outlet!</p> 
</div> 
</div> 
</div> 

И вот мой jQuery. Все это отлично работает, кроме функции content.active click. ЗАЧЕМ? Я в тупике!

$(document).ready(function(){ 

    $(".marker").hover(
     function(){ 
      $(this).children(".content.inactive").addClass("show"); 
      $(this).children(".content.inactive").animate({width: 155}, "fast");  
     } 
     , 
     function(){ 
      $(this).children(".content.inactive").animate({width: 5, height: 23}, "fast"); 
      $(this).children(".content.inactive").removeClass("show");  
     } 
    ); 

    $(".content.inactive").click(
     function(){ 
      $(this).removeClass("inactive"); 
      $(this).addClass("active"); 
      $(this).animate({width: 435, height: 205}, "fast"); 
      $(".inactive").addClass("disabled"); 
      $(".disabled").removeClass("inactive"); 
      $(".disabled").parent().addClass("dim"); 
      $("#truck img").addClass("dim"); 
     } 
    ); 

    $(".content.active").click(
     function(){ 
      $(this).removeClass("active"); 
      $(this).removeClass("show"); 
      $(this).addClass("inactive");  
      $(this).animate({width: 5, height: 23}, "fast"); 
      $(".disabled").addClass("inactive"); 
      $(".disabled").parent().removeClass("dim"); 
      $(".inactive").removeClass("disabled"); 
      $("#truck img").removeClass("dim"); 
     } 
    ); 

    $(".content").click(function(){ return false; }); 
    $(document).on("click", function() { 
     $(".content").animate({width: 5, height: 23}, "fast"); 
     $(".disabled").addClass("inactive"); 
     $(".inactive").removeClass("disabled"); 
     $(".inactive").parent().removeClass("dim"); 
     $("#truck img").removeClass("dim"); 
     $(".active").addClass("inactive"); 
     $(".show").removeClass("show"); 
     $(".active").removeClass("active"); 
    }); 
}); 

Вот ссылка на сайт: http://stlenergy.org/evie/

Любая помощь будет принята с благодарностью. Я уверен, что моя логика не правильная, или я пропускаю что-то больно очевидное. Благодаря!

Answer 1

Используйте это:

function inactiveClick(){ 
      $(this).removeClass("inactive"); 
      $(this).addClass("active"); 
      $(this).animate({width: 435, height: 205}, "fast"); 
      $(".inactive").addClass("disabled"); 
      $(".disabled").removeClass("inactive"); 
      $(".disabled").parent().addClass("dim"); 
      $("#truck img").addClass("dim"); 
     $(this).unbind('click'); // added this 
     $(this).click(activeClick); // added this 
     return false; // added this 
} 
function activeClick(){ 
      $(this).removeClass("active"); 
      $(this).removeClass("show"); 
      $(this).addClass("inactive");  
      $(this).animate({width: 5, height: 23}, "fast"); 
      $(".disabled").addClass("inactive"); 
      $(".disabled").parent().removeClass("dim"); 
      $(".inactive").removeClass("disabled"); 
      $("#truck img").removeClass("dim"); 
     $(this).unbind('click'); // added this 
     $(this).click(inactiveClick); // added this 
     return false; // added this 
} 
$(document).ready(function(){ 

    $(".marker").hover(
     function(){ 
      $(this).children(".content.inactive").addClass("show"); 
      $(this).children(".content.inactive").animate({width: 155}, "fast");  
     } 
     , 
     function(){ 
      $(this).children(".content.inactive").animate({width: 5, height: 23}, "fast"); 
      $(this).children(".content.inactive").removeClass("show");  
     } 
    ); 

    $(".content.inactive").click(
     inactiveClick 
    ); 

    $(".content.active").click(
     activeClick 
    ); 
    //$(".content").click(function(){ return false; }); // removed so I can unbind the elements 
    $(document).on("click", function() { 
     $(".content").animate({width: 5, height: 23}, "fast"); 
     $(".disabled").addClass("inactive"); 
     $(".inactive").removeClass("disabled"); 
     $(".inactive").parent().removeClass("dim"); 
     $("#truck img").removeClass("dim"); 
     $(".active").addClass("inactive"); 
     $(".show").removeClass("show"); 
     $(".active").removeClass("active"); 
    }); 
}); 

Проблема, как уже упоминалось Акулы, является то, что ваши элементы не имеют в active класс до они нажимаются, поэтому они никогда не связаны событием клика.

я сделал следующее:

• Разделенные неактивных и активных щелчки в свои собственные функции
• Добавлено возвращают ложные к двум функциям
• Unbound в конце функций щелчка элементы
• Связанные события нового щелчка с элементами в конце функций щелчка

редактировать: Я не знал, что в то время, но JQuery имеет метод .он(), который идеально подходит для вашей ситуации:

$(document).ready(function(){ 

    $(".marker").hover(
     function(){ 
      $(this).children(".content.inactive").addClass("show"); 
      $(this).children(".content.inactive").animate({width: 155}, "fast");  
     } 
     , 
     function(){ 
      $(this).children(".content.inactive").animate({width: 5, height: 23}, "fast"); 
      $(this).children(".content.inactive").removeClass("show");  
     } 
    ); 

    $('body').on('click',".content.inactive",function(){ 
     $(this).removeClass("inactive"); 
      $(this).addClass("active"); 
      $(this).animate({width: 435, height: 205}, "fast"); 
      $(".inactive").addClass("disabled"); 
      $(".disabled").removeClass("inactive"); 
      $(".disabled").parent().addClass("dim"); 
      $("#truck img").addClass("dim"); 
     } 
    ); 

    $('body').on('click',".content.active",function(){ 
     $(this).removeClass("active"); 
      $(this).removeClass("show"); 
      $(this).addClass("inactive");  
      $(this).animate({width: 5, height: 23}, "fast"); 
      $(".disabled").addClass("inactive"); 
      $(".disabled").parent().removeClass("dim"); 
      $(".inactive").removeClass("disabled"); 
      $("#truck img").removeClass("dim"); 
    }); 
    $(".content").click(function(){ return false; }); // removed so I can unbind the elements 
    $(document).on("click", function() { 
     $(".content").animate({width: 5, height: 23}, "fast"); 
     $(".disabled").addClass("inactive"); 
     $(".inactive").removeClass("disabled"); 
     $(".inactive").parent().removeClass("dim"); 
     $("#truck img").removeClass("dim"); 
     $(".active").addClass("inactive"); 
     $(".show").removeClass("show"); 
     $(".active").removeClass("active"); 
    }); 
}); 

Answer 2

Я считаю, что это потому, что в то время, когда ваши слушатели объявлены, не будет завернутого набора, который содержит классы content и active. Так что слушателю не нужно назначать слушателю click().

Вы могли бы сделать что-то вроде:

$(".content").click( 
function(){ 
    var inactiveObjects = $(this).hasClass("inactive"); 
    inactiveObjects.removeClass("inactive"); 
    inactiveObjects.addClass("active"); 
    inactiveObjects.animate({width: 435, height: 205}, "fast"); 
    $(".inactive").addClass("disabled"); 
    $(".disabled").removeClass("inactive"); 
    $(".disabled").parent().addClass("dim"); 
    $("#truck img").addClass("dim"); 

    var activeObjects = $(this).hasClass("active"); 
    activeObjects.removeClass("active"); 
    activeObjects.removeClass("show"); 
    activeObjects.addClass("inactive");  
    activeObjects.animate({width: 5, height: 23}, "fast"); 
    $(".disabled").addClass("inactive"); 
    $(".disabled").parent().removeClass("dim"); 
    $(".inactive").removeClass("disabled"); 
    $("#truck img").removeClass("dim"); 
} 
); 

Answer 3

Я просто смотрел на ваш сайт. Я думаю, что вы можете получить то, что хотите, с существующим кодом, если вы удалите обработчик кликов для .content.active и .content и добавьте return false; в конец обработчика .content.inactive. Не возвращая false для щелчка активного содержимого, событие клика будет пузыриться до обработчика document, и это должно закрыть ваши открытые диалоги. Это будет иметь дополнительное преимущество, заключающееся в том, чтобы сохранить код закрытия диалога в одном месте.