Событие клика внутри динамически добавленной таблицы

Question

Я динамически добавляю таблицу к JQuery MObile UK

Таблица выглядит так

<table><TR><TD><a href="#" id="ClickedMe"></a><TD></TR></table>

Таблица затем добавляется в HTML

Позже я пытаюсь связать событие клика как это

$('#ClickedMe').bind('click', function(e){
    alert("hello");
});

Но предупреждение никогда не срабатывает.

==== обновление ===

так таблица динамически добавляется в строку

cust = cust + "<table id='cusTable'><tr><td scope='row'>" + getLocalizeLbl("phone") + ":</td><td>" + c.PhoneNo + "</td>";
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("fax") + ":</td><td>" + c.Fax + "</td>";
    cust = cust + "</tr><tr><td rowspan='1'></td></tr><tr><td scope='row'>" +  getLocalizeLbl("contact") + ":</td><td><a href='contacts.html' rel='external'>" + dc.Name + "</a></td>";
    sessionStorage.ContactID=dc.ID;
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("email") + ":</td><td>" + dc.Email + "</td>";
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("direct") + ":</td><td>" + dc.Direct + "</td>";
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("mobile") + ":</td><td>"+ dc.Mobile + "</td></tr>";
    cust = cust + "</tr><tr><td scope='row'>" +  'Bill to Cust' + ":</td><td><a href='#' id='ClickedMe'>333343</a></td></tr></table>"

и я пытаюсь разместить функцию, как указано во всех ответах, внутри события pagecreate, но все равно не повезло. Почему это предупреждение не срабатывает ??

Answer 1

Код, который вы ищете:

$('#containerId').on('click', '#ClickMe',function(e){
  alert("hello");
});

Но это не имеет смысла. Селектор предназначен для id, а идентификатор должен быть уникальным !. Поэтому, когда вы добавляете новый элемент #ClickMe, присоединяете его к обратному вызову click.

$('#ClickMe').click(function(e){
    alert("hello");
});

Прочитайте документы (хотя читать пара абзацев ...):

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

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

Обработчики событий привязываются только к выбранным в данный момент элементам; Oни должен существовать на странице в тот момент, когда ваш код вызывает .on (). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие привязка внутри обработчика готовых документов для элементов, которые находятся в HTML-разметка на странице. Если новый HTML вводится на страницу, выберите элементы и прикрепите обработчики событий после того, как новый HTML размещены на странице. Или используйте делегированные события, чтобы прикрепить событие обработчик, как описано далее.

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементы-потомки, которые добавляются в документ позднее. От выбрать элемент, который гарантированно будет присутствовать во время делегированный обработчик событий прикреплен, вы можете использовать делегированные события для Избегайте необходимости часто подключать и удалять обработчики событий. это элемент может быть контейнерным элементом представления в Дизайн Model-View-Controller, например, или документ, если событие Обработчик хочет отслеживать все всплывающие события в документе. элемент документа доступен в заголовке документа до загружая любой другой HTML-код, поэтому безопасно прикреплять туда события без в ожидании готовности документа.

Answer 2

Измените ваши звонки с .bind() на .on() - проверьте справочник API здесь , так как для этого потребуется небольшое изменение "подписи".

Привязка работает только для элементов, которые находятся в DOM в текущий момент (т. Е. Ничто, введенное в DOM, не будет иметь привязанного события)

Answer 3

Это простой пример того, как динамически получить элемент из DOM и выполнить с ним некоторые операции.

$(val).on("change", function (e) {
        var valnew = e.currentTarget.value;
        console.log(valnew);
        var name = e.currentTarget.parentNode;
        var name2 = name.nextElementSibling;
        var name3 = name2.childNodes;
        name3[1].innerHTML = valnew;
        console.log(name2);

    });

Object val это элемент, который я передаю по методу onclick внутри кода HTML:

<input type="range"  onmousedown="SetRangeVal(@rabat.id_usluga,this)" onma value="0" maxlength="100" step="1" />

Первый код, который я поместил в анонимную функцию:

var SetRangeVal = function(id,val){

};

У меня все работает.

Answer 4

Согласно api.jquery.com, метод .live () устарел.Это, вероятно, сделает свое дело, но лучше сделать что-то вроде этого:

$("#ClickedMe").on("click", function(event){
    alert("hello");
});

Answer 5

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

В качестве альтернативы, добавьте идентификатор в таблицу, tr или td, чтобы сделать его активируемым.

Кроме того, вам, вероятно, следует использовать1005 * вместо .bind.

Answer 6

Используйте jQuery on() для этого:

$(document).on('click', '#ClickedMe', function(e){
  alert("hello");
  e.preventDefault();
});

Это будет работать с элементами, динамически вставляемыми в DOM.

Answer 7

Вы можете использовать .on, связывать события для динамического контента:

$(document).on("click", "#ClickedMe", function(){ alert("hello"); }); 

---

* Не используйте .live, оно устарело: http://api.jquery.com/live/