onclick метод не работает

Question

Я привязываю события click к динамически созданным элементам. Это мой метод создания динамических элементов.

ajaxCall("/getItems","POST",data,function(result){ 
    var element = $('.item').first(); 
    $('#item-list-section').empty(); 

    for(var i = 0; i < result.items.length; i++){ 
     var clone = element.clone(); 

     clone.attr("id", result.items[i].itemId); 
     clone.find('.item-price').html("<h4>25</h4>"); 
     if(result.items[i].itemName.length > 20){ 
      clone.find('.item-name').css('overflow','hidden'); 
      clone.attr('title', result.items[i].itemName) 
     } 
     clone.find('.item-name').html("<h4>"+ result.items[i].itemName + "</h4>"); 

     clone.on('click',function(){ 
      showToolTip(); 
     }); 

     clone.draggable({ 
      revert : false, 
      zIndex: 1, 
      containment: "window", 
      opacity: 0.5, 
      cursor: "move", 
      helper: function() { return $(this).clone().appendTo('body').show(); } 
     }); 
     $('#item-list-section').append(clone); 
    } 
}); 

Это функция события click!

function showToolTip(){ 
    $newDiv = $('<div></div>'); 
    $newDiv.css("display", "none"); 
    $newDiv.addClass('tooltip'); 
    $newDiv.append('adfhadfhadfhadfh') 
    $newDiv.appendTo("body"); 
    $newDiv.fadeIn().css(({ left: e.pageX, top: e.pageY })); 
} 

Я использовал точки отладки firebug, но не отключал функцию щелчка! Неверно, как я привязываю событие click!

Answer 1

Если добавить обработчик событий нажмите на '#item-list-section' элемент вне вашего for цикла, его будет срабатывать динамически создаваемые элементы внутри:

$('#item-list-section').on('click', 'element', function() { ... }); 

Здесь вы можете заменить element клонированным типом элемента или любыми идентифицирующими классами, как обычно. Если ваш клонированный элемент был <div class="myDiv">, например, вы могли бы использовать 'div' или '.myDiv' и т.д.

Например, если ваша разметка в конечном итоге быть что-то вроде:

<div id="item-list-section"> 
    <div class="myClonedElement"></div> 
    <div class="myClonedElement"></div> 
    <div class="myClonedElement"></div> 
</div> 

Вы можете связать события нажатия на клонировали элемент контейнера с использованием:

$('#item-list-section').on('click', '.myClonedElement', function() { 
    showTooltip(); 
}); 

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

JSFiddle example.

Answer 2

Заменить код:

clone.on('click',function(){ 

с этим:

$(document).on('click', '#' + result.items[i].itemId, function(){ 

Ссылка: Understanding Event Delegation

Answer 3

Уверены ли, что у исходного объекта уже нет обратного вызова клика?

попробовать:

clone.unbind("click"); 

перед установкой обратного вызова