JQuery click() не применяется к тегу привязки?

Question

Я создаю некоторые эскизы динамически с помощью JQuery, как это (в цикле):

var thumb = $('<a class="tinythumb"></a>'); 
thumb.append('<img src="' + productThumbnailList[i] + '" width="70" height="70" />'); 
thumbContainer.append(thumb); 

Теперь я пытаюсь добавить некоторые функции в них с помощью JQuery-х .click(), но я просто не могу заставить его работать , У меня никогда не было проблем с попыткой сделать это раньше, ошибок нет, и я ничего не вижу, с моей точки зрения, это неверно.

Я пробовал простую .each(), чтобы узнать, что произойдет. Как ни странно, атрибут relобновляется, но до сих пор нет функции .click() (предупреждение никогда не выполнялось).

$("div#thumbcontainer a").each(function() 
{ 
    $(this).attr("rel", "works"); 
    $(this).click(function() 
    { 
     alert('never called'); 

    }); 
}); 

Это страница, которую я пытаюсь работать с:

http://burwell.businesscatalyst.com/catalogue/containmentscreen/Enviroguard#

---

Вот весь JavaScript, который, вероятно, имеет то отношение в нем, что отсутствующий выше:

// Properties 
var thumbContainer = $("div#thumbcontainer"); 
var str = thumbContainer.html(); 
var productThumbnailList = str.split(';'); 

// Clear thumbContainer of junk HTML 
thumbContainer.html(""); 


// Create thumbnails 
if(productThumbnailList.length > 1) 
{ 
    for(var i = 0; i<productThumbnailList.length; i++) 
    { 
     var large = Math.round(i/2) * 2 == i ? false : true; 

     // create thumbnail 
     if(!large) 
     { 
      var thumb = $('<a class="tinythumb"></a>'); 
      thumb.append('<img src="' + productThumbnailList[i] + '" width="70" height="70" />'); 
      thumbContainer.append(thumb); 
     } 
    } 

    $("div#thumbcontainer a").each(function() 
    { 
     $(this).attr("rel", "works"); 
     $(this).click(function() 
     { 
      alert('never called'); 

     }); 

    }); 
} 

---

Добавление onclick="someFunc()" параметра в <a> тега делает вызов функции штрафа ..

Answer 1

Поскольку вы создаете якорный тег динамически, использование «на» прикрепить кнопку обработчик события

$('#thumbContainer').on("click","a", function(){ 
    alert("will work now"); 
}); 

http://jsfiddle.net/SUudh/23/

Если вы используете более старую версию jquery, используйте live() или delegate().

http://api.jquery.com/live/

Answer 2

есть синтаксическая ошибка в программном коде оного) до конца кода

$("div#thumbcontainer a").each(function() 
{ 
    $(this).attr("rel", "works"); 
    $(this).click(function() 
    { 
     alert('never called'); 

    }); 
}) 

Answer 3

вы не должен прикрепить обработчик щелчка в цикле each попробовать delegate (из стороны петли конечно)

$("div#thumbcontainer").delegate("a","click",function(e){ 
     alert('never called'); /should be called 

    }); 

Answer 4

правильный способ справиться delegated events с JQuery является использование .on. В принципе, когда вы добавляете элементы динамически, они еще не существуют на момент привязки обработчика. Поэтому вместо этого вы привязываете функцию к элементу статического предка нового: один, который делает, когда вы привязываете обработчик, и пусть событие «пузырится» и обрабатывает его там.

Code-накрест, это то, что вы в конечном итоге делает:

Избавиться от всего этого.

$("div#thumbcontainer a").each(function() 
{ 
    $(this).attr("rel", "works"); 
    $(this).click(function() 
    { 
     alert('never called'); 
    }); 
}); 

Заменить его с этим.

// $('#thumbcontainer a').attr('rel', 'works'); chain this directly if needed 

$("#thumbcontainer").on('click', 'a', function(e) 
{ 
    e.preventDefault(); // prevent the click from following link 
    alert('this gets called!'); 
});