Как сделать динамически добавленный контент кликабельным?

Question

Я добавляю динамический контент на php-страницу, используя jQuery. У меня нет проблем с добавлением контента, который я просто не могу найти, чтобы найти новый контент для события click.

Например (я использую div здесь, но может быть кнопкой или другим типом).

$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>'); 

Edit: настоящее время я использую JQuery 1.9.1, я использую 1.6.2, но я проверить Magnific-всплывающее окно, которое требуется более новая версия Jquery.

я не отправлял мои неудачные попытки (

$("#newstuff").click(function() {... 
$("#newstuff").live('click', function() {... 
binding the click event, etc. 

, потому что я предполагал, что я что-то фундаментальное, что более опытный пользователь JQuery заметит без шума разбитого кода отсутствует.

Answer 1

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

Вы должны сделать event delegation

$("#oldstuff").on("click", '#newstuff',function(){ 
alert($(this).text()); 
}); 

Answer 2

Вы можете прикрепить событие щелчка перед тем вставить элемент в DOM:

$('<div id="newstuff">...</div>').click(function(){ 
    //do something 
}).insertAfter('#oldstuff'); 

Answer 3

Попробуйте

$("#yourElementId").live("click",function(){ 
    alert($(this).text()); 
}); 

Как .click не работает после загрузки DOM или динамически созданный элемент

Answer 4

Что вам нужно, чтобы приложить событие в родительский элемент.

HTML:

<div id="parent"> 
    <div class="thediv">Hello</div> 
</div> 

JavaScript:

function addDiv() { 
    var div = document.createElement('div'); 
    div.className = 'thediv'; 
    document.getElementById('parent').appendChild(div); 
} 

$('#parent').on('click', '.thediv', function() { 
    // ... 
}); 

Смотрите, если этот метод работает.

Answer 5

Это, вероятно, вы связывание события перед установкой DOM, а также в последней версии библиотеки JQuery живого метода является устаревшим, поэтому постарайтесь, чтобы связать нажмите даже после установки DOM или вы можете использовать следующий код ...

первых добавить DOM.

$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>'); 

а затем связать событие.

$('#newstuff').on('click',function(){alert('do your stuff!')}); 

Или

$('#newstuff').click(function(){alert('do your stuff!')});