Не удается получить событие click на прикрепленных якорях

Question

Я уверен, что это имеет какое-то отношение к clone(), но я ничего не мог найти на нем. Моя проблема в том, что я добавляю в некоторый HTML с якорями. Эти якоря должны отвечать на щелчок(), а затем запускать вызов ajax. Кажется, я не могу остановить событие привязки якоря от работы над $ ('. Term a').

(function($) { 
$(document).ready(function() { 
var item = '#main-menu li'; 
var http_addy = 'http://windowsdeveloper.loc'; 
// voacabulary id is set in the menu. If one is found then load the terms to the menu 
$('*[id*=vocabulary]:visible').each(function() { 
      var voc_id = $(this).attr('id').split('-'); 
      var parent_li = $(this).parent('[class^=menu-]'); 
      $.get(http_addy + '/category/content/term_list/' + voc_id[1], function(data) { 
        $(parent_li).append(data); 
      }); 
    }); 
    // use this to get the terms nodes 
    $('div.term a').click(function(event){ 
      var url = $(this).attr('href'); 
      $.get(url, function(data) { 
        $('#term-nodes').append(data);      
      }); 
      return false; 
    }); 

    $(item).mouseenter(function(event){ 
     // Styles to show the box 
      $(this).children('.vocabulary').show(); 
     }  
    ); 
    $('.navigation').mouseleave(
     function() { 
      $('#main-menu li').children('.vocabulary').hide(); 
     } 
    ); 
}); 
})(jQuery); 



<ul id="main-menu" class="links inline clearfix main-menu"> 
<li class="menu-1050 first"> 
<a id="vocabulary-3" href="/newsarticletopics/windowsdeveloper">Articles</a> 
<div id="term-nodes"></div> 
<div id="voc-3" class="vocabulary" style="display: none;"> 
<div id="term-12" class="term"> 
    <a href="/category/content/term_nodes/12">Serien</a> 
</div> 
</div> 
</li> 

Answer 1

Это потому, что вы загружаете некоторый контент динамически и обновляете DOM. Вы должны использовать JQuery on, чтобы связать ваше событие щелчка, как этот

// use this to get the terms nodes 
$(document).on("click",".term a",function(event){ 
     event.preventDefault(); 
     var url = $(this).attr('href'); 
     $.get(url, function(data) { 
       $('#term-nodes').append(data);      
     });   
}); 

JQuery на работах для текущих и будущих элементов в DOM. on можно получить у jQuery 1.7+ и далее. Если вы используете предыдущую версию, чем это, вы должны рассмотреть live

Answer 2

$("selector").on("click", function(e){ 

// Do some code here 

}); 

Если вы используете старую версию JQuery вы можете использовать .delegate()

$("selector").delegate("click", function(e){ 

    // .delegate() takes the parameters a bit differently i think , correct me if i am wrong 
// Do some code here 

}); 

Event binding on dynamically created elements?