Сделать новый якорь жить в DOM

Question

Сделать новый якорь жить в DOM

0

Я пытаюсь добавить новый якорь с помощью кода ниже. Функция addButton отлично работает и добавляет соответствующий элемент в соответствующее место.

Однако этот элемент не является "активным". В частности, я не могу щелкнуть по нему, как я могу других.

Почему это так? Я думал, потому что я добавил через $ (document).on("click"...) он автоматически добавляется в DOM? (Указатель даже меняет значок, чтобы указать кнопку!)

$(document).on("click", "#addFavorite-button", function(){addButton();});


function addButton(){
    var uid = $("#main_container").attr("uid");
    var ticker = $("#main_container").attr("ticker");
    var exchange = $("#main_container").attr("exchange");

    var mydiv = document.getElementById("buttonlist");
    var aTag = document.createElement('a');
    aTag.setAttribute('class',"button widget d-margins stockButton");
    aTag.setAttribute('uid',uid);
    aTag.setAttribute('exchange',exchange);
    aTag.setAttribute('ticker',ticker);
    aTag.setAttribute('data-uib',"app_framework/button");   
    aTag.setAttribute('data-ver',"0");
    aTag.setAttribute('id',ticker+"-"+exchange+"-button");
    aTag.innerHTML = ticker;
    mydiv.appendChild(aTag);
};

Изменить: Слишком большое, чтобы добавить к скрипке, но я загрузил рабочую версию здесь:

Чтобы увидеть, как это работает, введите "FB", нажмите "go". Затем нажмите "Добавить товар в избранное" и "сделайте", затем нажмите кнопку "Избранное". Вы увидите вариант FB. Однако, если вы нажмете любой другой запас, например, MSFT, вы не сможете нажать и вернуться к FB снова. Текст в середине не меняется.

user1357015 31 март 2014, в 06:58

Источник

1

Вы можете поместить все связанное содержимое в скрипку и поделиться ссылкой? мы не можем видеть, какие рамки вы используете!
Sunny Sharma 31 март 2014, в 04:31
0

Слишком долго, чтобы положить в скрипку, но я предоставил рабочий пример непосредственно на моем сайте. Я использую каркас приложения Intel.
user1357015 31 март 2014, в 04:39

Теги:

javascript

jquery

2 ответа

1

Вы уже используете jQuery, так что вы можете заставить его работать на вас:

$('<a>', {
    "class": "button widget d-margins stockButton",
    "id": ticket + "-" + exchange + "-button",
    "href": "#", // you will need this in some browsers
    "uid": uid, // invalid attribute
    "exchange": exchange, // invalid attribute
    "ticket": ticket // invalid attribute
})
    .data({
        "uib": "app_framework/button",
        "ver": 0
    });
    .appendTo('#buttonlist');

Для выполнения этой работы вам также необходимо настроить делегированный обработчик #buttonlist который является ближайшим элементом DOM, который, скорее всего, не будет удален:

$('#buttonlist').on('click', '.stockButton', function(event) {
    // your click handler here
});

И удалите существующие $('stockButton').click(...).

Я также добавил атрибут href; некоторые браузеры не любят якоря без него.

Обратите внимание: uid, exchange и ticket не являются действительными атрибутами для элемента, поэтому я бы предложил использовать .data() для них.

Ja͢ck 31 март 2014, в 03:43

0

Это тоже работает. Зачем использовать $ ('buttonlist'). On ('click', '. StockButton' ...), а не $ (document) .on ('click', '.stockButton' ...)
user1357015 31 март 2014, в 05:24
1

@ user1357015 Это не рекомендуется использовать document , потому что JQuery код будет вызываться на все клики на странице, но вы действительно только хотите иметь код , выполняемый при нажатии внутри #buttonlist кнопки.
Ja͢ck 31 март 2014, в 05:26
0

Спасибо! также, есть ли причина использовать jquery вместо javascript, который я сделал? Я думал, что написание чистого JavaScript было немного быстрее?
user1357015 31 март 2014, в 05:27
0

@ user1357015 Простота создания элемента с использованием jQuery перевешивает небольшое улучшение скорости, которое вы получите при использовании собственного JavaScript.
Ja͢ck 31 март 2014, в 05:31
0

Итак, чтобы убедиться, что я правильно прочитал код: $ ('# buttonlist'). On ('click', '.stockButton', function (event) {// ваш обработчик кликов здесь}); означает, что для каждого созданного дочернего элемента div buttonList с классом stockButton автоматически создается обработчик нажатия. Это означает, что "addFavorite-button" не обязательно должен быть .on (click ..., поскольку я тоже никогда не добавляю подэлементы. Этот элемент можно вызывать на обычном .click?
user1357015 31 март 2014, в 05:36
1

@ user1357015 Да, ты, наверное, правильно сказал это :)
Ja͢ck 31 март 2014, в 05:38

Показать ещё 4 комментария

Ещё вопросы

Вы можете поместить все связанное содержимое в скрипку и поделиться ссылкой? мы не можем видеть, какие рамки вы используете!
Слишком долго, чтобы положить в скрипку, но я предоставил рабочий пример непосредственно на моем сайте. Я использую каркас приложения Intel.
Это тоже работает. Зачем использовать $ ('buttonlist'). On ('click', '. StockButton' ...), а не $ (document) .on ('click', '.stockButton' ...)
@ user1357015 Это не рекомендуется использовать document , потому что JQuery код будет вызываться на все клики на странице, но вы действительно только хотите иметь код , выполняемый при нажатии внутри #buttonlist кнопки.
Спасибо! также, есть ли причина использовать jquery вместо javascript, который я сделал? Я думал, что написание чистого JavaScript было немного быстрее?
@ user1357015 Простота создания элемента с использованием jQuery перевешивает небольшое улучшение скорости, которое вы получите при использовании собственного JavaScript.
Итак, чтобы убедиться, что я правильно прочитал код: $ ('# buttonlist'). On ('click', '.stockButton', function (event) {// ваш обработчик кликов здесь}); означает, что для каждого созданного дочернего элемента div buttonList с классом stockButton автоматически создается обработчик нажатия. Это означает, что "addFavorite-button" не обязательно должен быть .on (click ..., поскольку я тоже никогда не добавляю подэлементы. Этот элемент можно вызывать на обычном .click?
@ user1357015 Да, ты, наверное, правильно сказал это :)

Sunny Sharma · Accepted Answer · 2014-03-31T03-12-00.000Z

в файле index_user_scripts.js заменить следующие строки сценария:

замещать

$(".stockButton").click(function(evt){
     uib_sb.toggle_sidebar($("#leftPanel")); 
     setView($(this).attr("uid"),$(this).attr("ticker"), $(this).attr("exchange"));
});

(Обновление) С

$('#buttonlist').on('click','.stockButton',function(evt){
   uib_sb.toggle_sidebar($("#leftPanel")); 
   setView($(this).attr("uid"),$(this).attr("ticker"), $(this).attr("exchange"));
});

объяснение

Первый скрипт делегирует событие всем элементам, имеющим селектор ".stockButton", которые в настоящее время находятся в DOM. он не работает для динамически добавленных элементов.

Сценарий Later поддерживает делегирование событий динамически добавленным дочерним элементам. НЕ всегда рекомендуется делегировать события через " документ ".

Предпочтительно вы должны делегировать событие через ближайший родительский элемент дочернего элемента.

Как вы можете видеть сценарий, упомянутый в ответе Джека

$('#buttonlist').on('click', '.stockButton', function(event) {
    // your click handler here
});

в сценарии выше #buttonlist является ближайшим родителем всей дочерней кнопки (любимые кнопки)

Здесь ссылка на .on() в случае, если вы захотите посмотреть.

Это сработало! Спасибо. Не могли бы вы написать краткое объяснение разницы? Почему сначала нужно выбрать $ (document)? Я учусь методом проб и ошибок, и это было бы очень полезно. Еще раз спасибо :-).
@RobG: конечно, посмотрите обновленный ответ, спасибо за указание на это!
@Sunny, поэтому мне все еще нужны $ (document) .on ("click", "# addFavorite-button", function () {addButton ();}) ;? Могу ли я просто добавить это через событие .click? - проверено - да, я могу.