JQuery click () не будет применяться к тегу привязки? - PullRequest
Новая
       0

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

0 голосов
/ 20 декабря 2011

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

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

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

Я попробовал это простое .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> заставляет его нормально вызывать функцию.

Ответы [ 4 ]

1 голос
/ 20 декабря 2011

вам не нужно прикреплять обработчик щелчков в цикле each try делегат (вне цикла) 

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

    });
0 голосов
/ 02 февраля 2013

Правильный способ обработки делегированных событий с помощью jQuery - использовать .on.По сути, когда вы добавляете элементы динамически, они еще не существуют в то время, когда вы привязываете обработчик.Поэтому вместо этого вы привязываете функцию к статическому элементу-предку нового элемента - элемента, который существует , когда вы связываете обработчик, и позволяете событию пузыриться и обрабатывать его там.*

Код, вот что вы в итоге делаете:

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

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

Замените его следующим.1017 * 

// $('#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!');
});
0 голосов
/ 20 декабря 2011

в вашем коде добавлена ​​синтаксическая ошибка) до конца кода 

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

    });
})
0 голосов
/ 20 декабря 2011

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

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

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

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

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

...