JQuery - Как я могу динамически добавлять элемент clickable после перерисовывания

Я видел другие сообщения по этой теме, но они всегда меняют элементы при перерисовании. У меня есть список элементов, я хочу нажать на один и удалить его с помощью ajax, а затем перерисовать один и тот же список и сделать его доступным для кликов. Щелчок после перерисовывания не работает. Следующий код перерисовывает список штрафа один раз. Затем элементы «listto» больше не доступны для кликов. Я думал, что «на» должен был справиться с этим. Как я могу сделать эту работу?JQuery - Как я могу динамически добавлять элемент clickable после перерисовывания

$('.listto').on('click',function() { 
    var tmp = $(this).attr('id').substr(1).split("|"); 
    $.ajax({url: '/contact/removefromlist/'+tmp[0]+'/'+tmp[1], 
     success: function(data) { 
      redrawtolist(data,tmp[1]) 
     } 
    }); 
}); 

function redrawtolist(data,item) { 
    var dat = JSON.parse(data); 
    var str = ""; 
    $.each(dat, function(index, rel) { 
     str += '<div id="t'+index+'|'+item+'" class="listto">'+rel+'</div>'; 
    }); 
    $('#tolist').html(str); 
}

источник

2013-07-31 Doug Wolfgram

Изменение обработчика к этому:

$('#tolist').on('click', '.listto', function(){})

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

У вас есть много информации о прямом связывании и делегированном связывании на этой странице: http://api.jquery.com/on/

источник

2013-07-31 17:29:46

Я знал, что я был близок ... Это имеет смысл. Благодаря! И это работает. –

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

$('#tolist').on('click', '.listto', function() {

Теперь, пока #tolist не будет заменен, обработчик не будет удален путем замены .listto элементов.

Подробнее о делегировании событий вы можете узнать в on documentation.

источник

2013-07-31 17:29:13

Ваша проблема в том, что вы присоединяете событие к элементу, который не готов принять это событие. Вы должны прикрепить событие к родительскому элементу, затем вы можете фильтровать для .listto. Таким образом, не имеет значения, когда ваши элементы, доступные для нажатия, будут добавлены, он будет работать. Это называется делегированием событий. Вы делегируете задачу обработки события другому элементу.

HTML:

<body> 
    <button>Click here to add book.</button> 
</body>

И ваши JS:

$(document).on("click", ".listto", function() { 
    alert('it works!'); 
});

Кроме того, при этом, не прикрепить его к родителю, что это слишком высоко дерево. Вы хотите прикрепить его к ближайшему возможному родительскому элементу. Нам не нужно иметь событие click на чем-то вроде document, потому что это хорошая идея, чтобы быть конкретным, какие элементы получат это событие. Прикрепление его к document будет означать, что любой элемент, имеющий класс .listto, будет доступен и сможет ответить на один и тот же код. Если вы хотите иметь разную функциональность на разных кнопках, вы не можете, потому что все они отвечают на тот же код, что и на document.

$('#tolist').on("click", ".listto", function() { //This would be best, but will only work if #tolist is not dynamic 
    alert('it works!'); 
});

источник

2013-07-31 17:29:44

JQuery - Как я могу динамически добавлять элемент clickable после перерисовывания

ответ

Смежные вопросы