jQuery « При добавлении нового элемента DOM через jQuery, он не срабатывает на перехватчики событий

В JavaScript коде есть примерно такой участок:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

$(document).ready(function() {
        $('.update-link').click(function() {
        id = $(this).attr('rel');
        //.. do something
              alert('ID: ' + id);
        });
        $('#add').click(function() {
             $('<input type="button" class="update-link" value="Сохранить" />').insertAfter('#lastelement');
        });
});
 


Соответственно при нажатии на ссылку с id "add" действительно появляется нужная мне кнопка, но вот нажатия на неё не перехватываются, хотя у неё тот же класс, что и у изначально загруженных кнопок. Остальные кнопки, которые загружены изначально со страницей, срабатывают нормально.
Как я понимаю, нужно каким-то макаром «обновить» DOM, чтобы перехватчик события клика увидел новый элемент?
0
dom event jquery

1 ответов

Просто используй $('.update-link').live('click', function() {} вместо текущего кода. Это самый простой, но не самый правильный способ.

3

".... макаром «обновить» DOM, чтобы перехватчик события клика увидел новый элемент... " странная логика, вы думаете что когда кликаете по элементу "перехватчик" обходит все элементы с классом .update-link?

Вы загрузили документ, прошлись по всем элементам $('.update-link') и повесили на них евент, все, какие были элементы получили события. Если вы добавляете еще элмент делайте callback функцию которая навесит на этот новый элемент событие.

К сожалению в JQuery не силен но примерно могу набросать


var next_link_id = 5;
var category = 3;

function addNewLine() {
    var btn = $('<input type="button" rel="' + next_link_id + '" value="Сохранить" style="height: 25px;" class="update-link" />');
    btn.click(process);
    var newelement = $('<tr id="rel' + next_link_id + '"></tr>');
    var td1 = $('<td class="gray villageid">' + next_link_id + '</td>');
    var td2 = $('<td class="gray"><a href="#" id="link' + next_link_id + '"></a></td>');
    var td3 = $('<td class="gray"><input type="text" name="link' + next_link_id + '_link" id="link' + next_link_id + '_link" style="width: 300px;" /></td>');
    var td4 = $('<td class="gray"></td>');
    td4.append(btn);
    newelement.append(td1);
    newelement.append(td2);
    newelement.append(td3);
    newelement.append(td4);
    newelement.insertAfter('#head');
}

function process() {
    id = $(this).attr('rel');
    if($('#link' + id + '_link').val() == '')
      alert('Введите адрес ссылки!');
    else
    {
      var link = $('#link' + id + '_link').val();
      var text = $('#link' + id + '_text').val();
      setLink(id, link, text, category);
    }
}

$(document).ready(function() {
  $('.update-link').click(process);
  $('#add-link').click(function() {
      addNewLine();
      next_link_id++;
  });
});
function setLink(id, link, text, category)
{
  $.post('add_link.php', { id: id, link: link, text: text, category: category}, function(data){
    if(data == 'success')
    {
      alert('Данные сохранены');
      if(text == '')
        text = link;
      $('#link' + id).html(text);
      $('#link' + id).attr('href', link);
    }
  });
}
 

PS Поправьте в комментариях как правильно это должно выглядеть на JQuery
UPD: Отредактировал код.
0

Для ustisha:


var next_link_id = 5;
var category = 3;

$(document).ready(function() {
  $('.update-link').click(function() {
    id = $(this).attr('rel');
    if($('#link' + id + '_link').val() == '')
      alert('Введите адрес ссылки!');
    else
    {
      var link = $('#link' + id + '_link').val();
      var text = $('#link' + id + '_text').val();
      setLink(id, link, text, category);
    }
  });
 
  $('#add-link').click(function() {
    var newelement = '<tr id="rel' + next_link_id + '"><td class="gray villageid">' + next_link_id + '</td><td class="gray"><a href="#" id="link' + next_link_id + '"></a></td><td class="gray"><input type="text" name="link' + next_link_id + '_link" id="link' + next_link_id + '_link" style="width: 300px;" /></td><td class="gray"><input type="text" name="link' + next_link_id + '_text" id="link' + next_link_id + '_text" style="width: 300px;" /></td><td class="gray"><input type="button" rel="' + next_link_id + '" value="Сохранить" style="height: 25px;" class="update-link" /></td></tr>';
    $(newelement).insertAfter('#head');
    $('input[rel=' + next_link_id + ']').onclick = setLink(next_link_id, $('#link' + next_link_id + '_link').val(), $('#link' + next_link_id + '_text').val(), category);
    next_link_id++;
  });
});
function setLink(id, link, text, category)
{
  $.post('add_link.php', { id: id, link: link, text: text, category: category}, function(data){
    if(data == 'success')
    {
      alert('Данные сохранены');
      if(text == '')
        text = link;
      $('#link' + id).html(text);
      $('#link' + id).attr('href', link);
    }
  });
}
 

Есть таблица с ячйками: ID ссылки, поле input с адресом ссылки, поле input с текстом ссылки, кнопка «Сохранить».
При клике на ссылку с id "add", в таблицу добавляется новая строка TR с пустыми соответствующими полями. Переменная next_link_id соответственно указывает на id новой ссылки. Всё создаётся нормально, вот только после

$('input[rel=' + next_link_id + ']').onclick = setLink( //...
 
У меня сразу же срабатывает нажатие на новую кнопку %) И соответственно в базу добавляется пустая ссылка.
0

Сократил код до такого:


var next_link_id = 5;
var category = 3;

$(document).ready(function() {
  $('.update-link').click(setLink($(this).attr('rel')));
 
  $('#add-link').click(function() {
    var newelement = '<tr id="rel' + next_link_id + '"><td class="gray villageid">' + next_link_id + '</td><td class="gray"><a href="#" id="link' + next_link_id + '"></a></td><td class="gray"><input type="text" name="link' + next_link_id + '_link" id="link' + next_link_id + '_link" style="width: 300px;" /></td><td class="gray"><input type="text" name="link' + next_link_id + '_text" id="link' + next_link_id + '_text" style="width: 300px;" /></td><td class="gray"><input type="button" rel="' + next_link_id + '" value="Сохранить" style="height: 25px;" class="update-link" /></td></tr>';
    $(newelement).insertAfter('#head');
    $('input[rel=' + next_link_id + ']').click(setLink(next_link_id));
    next_link_id++;
  });
});
function setLink(id)
{
  var link = $('#link' + id + '_link').val();
  var text = $('#link' + id + '_text').val();
  $.post('add_link.php', { id: id, link: link, text: text, category: category}, function(data){
    if(data == 'success')
    {
      alert('Данные сохранены');
      if(text == '')
        text = link;
      $('#link' + id).html(text);
      $('#link' + id).attr('href', link);
    }
  });
}
 

Но теперь просто при загрузке страницы сразу же вызывается setLink() почему-то %)
0