Привязка событий к динамически создаваемым элементам?
Если вы не используете jQuery, пожалуйста, убедитесь, что:
var json_upload = "json_name=" + JSON.stringify({name:"John Rambo", time:"2pm"});
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
xmlhttp.open("POST", "/file.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(json_upload);
И для конца приема php:
$_POST['json_name']
3 ответа
Начиная с jQuery 1.7 , вы должны использовать jQuery.fn.on :
$(staticAncestors).on(eventName, dynamicChild, function() {});
До этого рекомендовалось использовать live () :
$(selector).live( eventName, function(){} );
Однако live () устарел в версии 1.7 в пользу в () и полностью удален в 1.9. Подпись live () :
$(selector).live( eventName, function(){} );
... может быть заменена следующей подписью on () :
$(document).on( eventName, selector, function(){} );
Например, если ваша страница динамически создавала элементы с имя класса dosomething вы должны привязать событие к родительскому элементу, который уже существует (это суть проблемы здесь, вам нужно что-то, что существует для привязки, а не для привязки к динамическому содержимому), это может быть (и самый простой вариант) документ . Однако имейте в виду, что документ может быть не самым эффективным вариантом .
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
Подойдет любой родительский элемент, существующий на момент привязки события. Например,
$('.buttons').on('click', 'button', function(){
// do something here
});
будет применяться к
<div class="buttons">
<!-- <button>s that are generated dynamically and added here -->
</div>
Вы могли просто обернуть свое событие обязательный призыв в функцию и затем вызвать его дважды: однажды на готовом документе и однажды после Вашего события, которое добавляет новые элементы DOM. Если Вы сделаете это, то Вы захотите постараться не связывать то же событие дважды на существующих элементах, таким образом, Вы должны будете или развязать существующие события или (лучше), только связывают с элементами DOM, которые недавно создаются. Код выглядел бы примерно так:
function addCallbacks(eles){
eles.hover(function(){alert("gotcha!")});
}
$(document).ready(function(){
addCallbacks($(".myEles"))
});
// ... add elements ...
addCallbacks($(".myNewElements"))
Можно добавить события к объектам при создании их. Если Вы добавляете, что те же события к нескольким объектам в разное время, создавая именованную функцию могли бы быть способом пойти.
var mouseOverHandler = function() {
// Do stuff
};
var mouseOutHandler = function () {
// Do stuff
};
$(function() {
// On the document load, apply to existing elements
$('select').hover(mouseOverHandler, mouseOutHandler);
});
// This next part would be in the callback from your Ajax call
$("<select></select>")
.append( /* Your <option>s */ )
.hover(mouseOverHandler, mouseOutHandler)
.appendTo( /* Wherever you need the select box */ )
;