jquery click event not firiing даже с методом ON

Question

Я в тупике.

Я создал ссылку, которая отображает форму, которая отлично работает.

Вот что ссылка выглядит следующим образом:

<a class="buttonA right popForm" m="guest">form</a> 

В форме это Аякса страница PHP и кроме всех других абракадаброй,
тянет эти два более соответствующие строки:

<a class="buttonA right closeForm">X</a> 
<a class="test">test</a> 

Вот jQuery:

$J(document).ready(function() { 
    $J(".popForm").click(function() { 
     var t = $J(this).attr("m"); 
     var id = ($J(this).attr("id") !== undefined ? $J(this).attr("id") : 0); 

     $J.ajax({ 
      beforeSend: function() { 
       //console.log(1); 
      }, 
      url: "popForm.php", 
      type: 'POST', 
      data: ({ 
       "t": t, 
       "id": id 
      }), 
      success: function (results) { 
       $J("#popup").html(results); 
       $J("#popup").show(); 
      } 
     }); 
    }); 
    $J(".test").on("click", function (e) { 
     console.log("e"+e); 
     alert('aa'); 
    }); 
    $J(".closeForm").on("click", function() { 
     alert(333); 
    }); 
}); 

Теперь я бывший связав мою ссылку «X», чтобы закрыть форму (или в этом случае предупредить меня с 333),
, но ссылка мертва.
На самом деле обе ссылки мертвы.

Я все, но бежать из умных идей отладки

• Я бегу самый последний JQuery LIB
• Я не preventDefault где-нибудь в моем коде

Answer 1

Используйте .on(), но в delegated-events approach как:

$J("#popup").on("click", ".test", function (e) { 
    console.log("e"+e); 
    alert('aa'); 
}); 
$J("#popup").on("click", ".closeForm", function() { 
    alert(333); 
}); 

http://api.jquery.com/on/#direct-and-delegated-events

делегированного событие имеет то преимущество, что они могут обрабатывать событие от элементов-потомков, которые добавляются к документу в более позднее время. Выбирая элемент, который, как гарантируется, присутствует в момент присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий. Этот элемент может быть элементом контейнера представления в дизайне Model-View-Controller, например, или документом, если обработчик события хочет контролировать все события пузырьков в документе. Элемент документа доступен в начале документа перед загрузкой любого другого HTML-кода, поэтому безопасно присоединять туда события, не дожидаясь готовности документа.

JQuery будет чем действовать, как:

$J("#popup").on( // Ohh I know this guy it's in the DOModel! 
        // let's see what event bubbling will he listen for... 
    "click",  // hihi, I know this event! That event should descend from... 
    ".closeForm", // hm, there's no such fella yet, 
        // but if one day if I find him... 
    function() { // I'll show him what's a function!!! 
      alert(333); 
    } 
);