Почему не активируются ссылки, которые я добавляю в DOM с Javascript?

Question

Я пишу букмарклет, чтобы изменить поведение главной страницы Google. Я люблю функциональность предварительного просмотра страницы поиска. Coolest.thing.ever. НО Мне бы очень хотелось посмотреть, как это было бы, если бы он работал в режиме LIVE SEARCH вместо того, чтобы навести курсор мыши на ссылки, чтобы увидеть его.

Так что есть несколько шагов к этому - у меня работает частичная функциональность.

Вот код JS.

javascript: (function() {
    c = document.getElementById('ires');
    nli = document.createElement('div');

    cell = 0;
    for (var Obj in google.vs.ha) {
        na = document.createElement('a');
        na.href = Obj;
        na.style.cssFloat = 'left';
        na.style.styleFloat = 'left';

        nd = document.createElement('div');
        cldiv = document.createElement('div');
        cldiv.style.clear = 'both';
        nd.style.width = google.vs.ha[Obj].data.dim[0] + 'px';
        nd.style.height = google.vs.ha[Obj].data.dim[1] + 'px';
        nd.style.margin = '5px';
        nd.style.padding = '5px';
        nd.style.border = '1px solid #999999';


        if (google.vs.ha[Obj].data.tbts.length) {
            nilDiv = document.createElement('div');
            for (i = 0; i < google.vs.ha[Obj].data.tbts.length; i++) {
                box = google.vs.ha[Obj].data.tbts[i].box;
                newbox = document.createElement('div');
                newbox.className = 'vsb vsbb';
                newbox.style.position = 'relative';
                newbox.style.top = (box.t) + 'px';
                newbox.style.left = box.l + 'px';
                newbox.style.height = box.h + 'px';
                newbox.style.width = box.w + 'px';
                nilDiv.appendChild(newbox);
                newtext = document.createElement('div');
                newtext.className = 'vsb vstb';
                newtext.innerHTML = google.vs.ha[Obj].data.tbts[i].txt;
                newtext.style.top = (box.t) + 'px';
                newtext.style.position = 'relative';
                nilDiv.appendChild(newtext);
            }
            nilDiv.style.height = '0px';
            nd.appendChild(nilDiv);
        }

        for (i = 0; i < google.vs.ha[Obj].data.ssegs.length; i++) {
            ni = document.createElement('img');
            ni.src += google.vs.ha[Obj].data.ssegs[i];
            ni.className += ' vsi';
            nd.appendChild(ni);
        }
        na.appendChild(nd);
        nli.appendChild(na);
    };
    c.insertBefore(nli, c.firstChild);
})();

На данный момент работает

1. поместите вышеуказанный код в закладку
2. поиск чего-нибудь в Google
3. нажмите на увеличительное стекло
4. нажмите на закладку

В настоящее время по какой-то причине ссылки, добавляемые на страницу, не активируются, если в окне предварительного просмотра изображения нет текстовых полей. Насколько я понимаю DOM, все содержимое тега <a> должно быть кликабельным.

Кто-нибудь знает, в чем проблема?

Другие вопросы, которые я хотел бы выяснить, - это как автоматически запрашивать изображения, не требуя от пользователя нажатия.

Как только это будет сделано, я попытаюсь превратить все это в прослушиватель событий, который автоматически запрашивает и отображает изображения по ключу в окне поиска.

Как круто это будет ?! :)

Кажется, я не могу заставить букмарклет "скомпилировать" здесь в стеке, но у меня есть тот, который вы можете перетащить на свою панель инструментов здесь: http://chesser.ca/2010/11/google-visual-image-search-hack-marklet.

или href должен выглядеть так

<a href="javascript:(function(){c=document.getElementById('ires');nli=document.createElement('div');cell=0;for(var Obj in google.vs.ha){na=document.createElement('a');na.href=Obj;na.style.cssFloat='left';na.style.styleFloat='left';nd=document.createElement('div');cldiv=document.createElement('div');cldiv.style.clear='both';nd.style.width=google.vs.ha[Obj].data.dim[0]+'px';nd.style.height=google.vs.ha[Obj].data.dim[1]+'px';nd.style.margin='5px';nd.style.padding='5px';nd.style.border='1px solid #999999';if(google.vs.ha[Obj].data.tbts.length){nilDiv=document.createElement('div');for(i=0;i<google.vs.ha[Obj].data.tbts.length;i++){box=google.vs.ha[Obj].data.tbts[i].box;newbox=document.createElement('div');newbox.className='vsb vsbb';newbox.style.position='relative';newbox.style.top=(box.t)+'px';newbox.style.left=box.l+'px';newbox.style.height=box.h+'px';newbox.style.width=box.w+'px';nilDiv.appendChild(newbox);newtext=document.createElement('div');newtext.className='vsb vstb';newtext.innerHTML=google.vs.ha[Obj].data.tbts[i].txt;newtext.style.top=(box.t)+'px';newtext.style.position='relative';nilDiv.appendChild(newtext);}nilDiv.style.height='0px';nd.appendChild(nilDiv);}for(i=0;i<google.vs.ha[Obj].data.ssegs.length;i++){ni=document.createElement('img');ni.src+=google.vs.ha[Obj].data.ssegs[i];ni.className+=' vsi';nd.appendChild(ni);}na.appendChild(nd);nli.appendChild(na);};c.insertBefore(nli,c.firstChild);})();">bookmarklet</a>

Answer 1

Встроенный элемент (a) не может содержать блочный элемент (div).

Браузеры могут по-разному обрабатывать некорректные элементы, подобные этим, но они попытаются извлечь из этого какой-то смысл.Один из способов исправить ошибку - переместить элемент блока за пределы встроенного элемента, что, конечно, означает, что на него нельзя нажимать.

Используйте элементы span вместо элементов div, а затем вы можете использовать стили CSS, чтобы использовать обассылка и элементы span в блочные элементы.