кнопка в .html не работает в jquery

Question

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

Demo : http://jsfiddle.net/k5bL7pkj/5/ 

Answer 1

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

Пример:

$('body').on('click', '#ss', function() { 
    alert("TEST"); 
    }); 

Fiddle

Answer 2

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

Попробуйте этот код:

$(document).ready(function(){ 
    $("#aa").click(function() { 
     var imgUrl = $(this).data('rel'); 
     $("#area").html("<img src='" + imgUrl + "' alt='description' /><button id='ss'>SSSSS</button>"); 

     $('#ss').click(function() { 
      alert("TEST"); 
     }); 

    }); 

}); 

Результат:http://jsfiddle.net/k5bL7pkj/8/

Answer 3

всегда использовать все ваши "щелкните, изменение или KeyUp" функции по документу, это поможет вам в будущем ...

$(document).on('click','#aa', function() { 
    var imgUrl = $(this).data('rel'); 
    $("#area").html("<img src='" + imgUrl + "' alt='description' /><button id='ss'>SSSSS</button>"); 
}); 

$(document).on('click','#ss', function() { 
    alert("TEST"); 
});